I'm trying to figure out the best way to do services in a React SPFx application. 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;
export function setSPContext(context:BaseWebPartContext){
spContext = spfi().using(SPFx(context));
}
export function otherThingThatNeedsToBeCalled(){
....something here
}
As you can see I have a let variable 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.