1

I'm trying to figure out the best way to do services in a React SPFx application. For those not familiar, SPFx is for SharePoint. Its just a react app with typescript wrapped inside a SharePoint webpart. I'm still new to react and every example I have seen returns some html and what I need is a file that handles complex logic and return objects that I can reuse in other SPFx solutions. For example this is what I'm doing now.

   `import { BaseWebPartContext } from "@microsoft/sp-webpart-base";
    import {spfi, SPFI, SPFx} from "@pnp/sp";
    import "@pnp/sp/webs";
    import "@pnp/sp/lists";
    import "@pnp/sp/items";
    import "@pnp/sp/fields";
    import "@pnp/sp/files";
    import "@pnp/sp/folders";
    import "@pnp/sp/batching";
    import "@pnp/sp/views";
    import {
        IPropertyPaneDropdownOption,
    } from '@microsoft/sp-property-pane'; 
    import {IColumnObject} from "./IColumnObject"; 
    import {IDataObjectParams} from "./IDataObjectParams"; 
    import { ISelectedObject } from "./ISelectedObject";

    let spContext:SPFI;
    let mainList :IListObject = {id:"",title:"",url:"//website"}
    let otherList:IListObject = {id:"",title:"",url:"//website"}

    export function setSPContext(context:BaseWebPartContext){
       spContext = spfi().using(SPFx(context));
    }

    export function otherThingThatNeedsToBeCalled(){
        ....something here
    }
`

As you can see I have let variables out in the open and I'm not sure if this is the proper way to do it. Most of the examples have a class for their services but that seems to defeat the purpose of using functional components. I would like it if I could just call the function like I'm doing here and return objects as I need them. Any examples of how you are doing services with functional components would be appreciated.

I have attempted to use context. I have tried to put it inside a function and export it in various ways. The only thing I have not done is put it inside a class but like I said above I'm not sure that is right either with functional components.

What I'm expecting is a way I can put a folder with some logic inside my react apps, that I can reuse and have it give an object back out to my different components. I want to know proper code structure when doing something like that.

Ben Hester
  • 11
  • 1

1 Answers1

0

One approach is th use a service locator pattern describes here https://laurakokkarinen.com/how-to-use-the-service-locator-pattern-in-spfx-react-solutions/ Basically a static class with the different methods you want to use.

Additionally you could use recoil with an atom and selector (e.g. listItemId is stored in recoil as atom and with the resoil selector you'll get the listitem information which calls the service).

Ueli Schwarz
  • 1
  • To create a service file for a Functional Component React app using SharePoint Framework (SPFx), you can follow these steps: 1. Open your SPFx project in your preferred code editor. 2. Create a new folder called "services" or any other name you prefer within the src folder of your project. This folder will contain your service files. 3. Inside the "services" folder, create a new JavaScript or TypeScript file for your service, for example, "MyService.ts". 4. In the service file, import the necessary dependencies and define your service class or functions. Here's an example of a basic servic – uttam kamar Jul 18 '23 at 03:24