Passing an SDK object to an RTKQuery slice

[MichaelGroenewald]

Hello!

I'm struggling to find a good way of using an SDK with RTKQuery's queryFn, without having to pass the SDK object in on every call.

export const myApiSlice = createApi({
    reducerPath: "myApiSlice",
    baseQuery: fakeBaseQuery(),
    endpoints: build => ({
        getData: build.query<ApiCommandOutput, {client: ApiClient; cmd: ApiCommandInput}>({
            queryFn: async args => {
                const retrieve = await args.client.send(new ApiCommand(args.cmd));

                return {data: retrieve};
            },
        }),
    }),
});

I'm having to call the endpoint using useGetDataQuery(client), but it would be nice to be able to do this without having to pass the client to every component and sending it to the query, as the client is created within the AppContext when the application starts and never changes. (This is in a big, old codebase so most of it was written without Redux.)

Is there a way to do this by:

1. By calling the context from within the query?
2. Passing the client in as a parameter to createApi somehow?
3. Any other way

It is not a strict requirement that the Api client lives within the context, but would make integration with the existing code easier.

Thanks for the read.

[MichaelGroenewald]

Managed to get it working by creating the slice within the context itself. Rather than having the API then exported in a global context, I then get access to it by referring to an API object within the context.

[phryneas]

Sorry for the late answer, lots of things going on. As an alternative, you could also add your SDK to the thunkExtra you can configure in configureStore/getDefaultMiddleware and access it as baseQueryApi.extra.

[GriffinSauce]

An alternative, you can rely on the fact that JS modules are singletons:

// your-api-sdk.ts

let clientPromise: Promise<ApiClient>

/**
 * Initialize an API client and store it in the module scope to be retrieved asynchronously (potentially outside react)
 * API SDK expects to only have one client per app, so we use this module to act as a singleton
 */
export const initApiClient: typeof initApi = async (...args) => {
  if (clientPromise) return clientPromise
  clientPromise = initApi(...args)
  return clientPromise
}

/**
 * Get the API client that was initialized asynchronously
 */
export const getApiClient = async (): typeof clientPromise => {
  // Is initializing / already initialized
  if (clientPromise) return clientPromise

  // Prevent silent hang by timing out, this can happen when you forget to initialize API
  const timeout = setTimeout(() => {
    throw new Error('get API client timeout')
  }, SAPI_CLIENT_TIMEOUT)

  // Poll for promise of client
  while (!clientPromise) await sleep(API_CLIENT_POLL)
  clearTimeout(timeout)
  return clientPromise
}

// rtk-api.ts
// .. 
    async queryFn(params) {
        try {
          const client = await getApiClient()
          const data = await client.getThings(params)
          return {data}
        } catch (error) {
          return {
            // ..
          }
        }
      },

We need to wait for some runtime information before intializing + the client init is async. So this is the solution I landed on.
TBH I'm not 100% happy with it because it's a bit magic but just sharing it in case it's useful.

---

@phryneas I think in general this is an improvement point: RTKQ is quite "focused" and it can be hard to work with external factors like this. Another example: passing analytics context to a query gets quite messy because it goes into the cache key by default. I think an extra parameter in the hook arguments could give consumers a lot more flexibility to solve these things with less code. (but also potentially shoot themselves in the foot)