What's rtf-query way to work with a SDK

[Albert-Gao]

Really love to migrate from 'react-query', but seems rtf-query only supports the raw http request, but not the other use cases? with the coupled network layer, seems no way to do after-retrieving-response operation?

My use case is quite simple,

I have a SDK provide network request which I need to build my API layer on top of it, for example baseRPC.history_get_key_accounts () is a function from the sdk, and my query function is like the following.

export async function getKeyAccountByPrivateKey(publicKey: string) {
  const [error, keyAccounts] = await to(
    baseRPC.history_get_key_accounts(publicKey),
  )

  if (error) {
    throw new Error('Error when retrieving accounts')
  }

  if (!keyAccounts || !keyAccounts.account_names?.length) {
    throw new Error('No account connected with this private key')
  }

  return keyAccounts
}

My current implementation is like this,

I build a custom baseQueryFunction, which could handle the 1st if (error) throw new Error('Error when retrieving accounts') in it as it is the general error.

But for the 2nd if (!keyAccounts || !keyAccounts.account_names?.length) check for throwing new Error('No account connected with this private key'), I do not know where to put it,

1st Problem: How to handle after-retrieving-response stage

I tried using the transformResponse(), but seems it does not support throw error, so either you can not throw unserilizable error, or the plain object being thrown will not be recognised as an error. As shown in the example below, throw error still result in an empty error object in the runtime.

Also, the documentation does not mention the error and response format supported by rtf-query?

Am I using rtk-query way?

My current setup has a lot of code

const sdkBaseQuery: BaseQueryFn<{
  action: keyof JsonRpc
  params: Parameters<any>
}> = async (arg, api) => {
  const state = api.getState() as AppState

  const rpc = new JsonRpc(state.blockChains.currentSelectedBlockChain.node, {
    fetch,
  })

  try {
    // @ts-ignore
    const result = await rpc[arg.action](...arg.params)
    return { data: result }
  } catch (e) {
    return { error: { status: 'FETCH_ERROR', error: (e as Error).message } }
  }
}

export const sdkAPI = createApi({
  reducerPath: 'sdkAPI',
  baseQuery: sdkBaseQuery,
  endpoints: (builder) => ({
    getKeyAccountByPublicKey: builder.query<
      RpcReturn<'history_get_key_accounts'>,
      RpcParams<'history_get_key_accounts'>
    >({
      query: (params) => ({
        action: 'history_get_key_accounts',
        params,
      }),

      transformResponse: (
        keyAccounts: RpcReturn<'history_get_key_accounts'>,
      ) => {
        // TOFIX: NOT WORKING
        if (!keyAccounts || !keyAccounts.account_names?.length) {
          throw {
            error: {
              status: 'CUSTOM_ERROR',
              data: { message: 'No account associated with this key' },
            } as FetchBaseQueryError,
          }
        }

        return keyAccounts
      },
    }),
  }),
})

For the react-query version, we do not need the 2nd sdkAPI, just pass that query function into useQuery and we are done, so I wonder what I am missing here?

Thanks :)

[markerikson]

Hiya. Very belated response here, but I think what you're looking for is the queryFn option instead of query, which is specifically designed to let you make an arbitrary async request and return the result yourself:

https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#customizing-queries-with-queryfn

If you want to see what this looks like in action, I've done some proof-of-concept work in Replay.io to use our backend SDK wrapped inside of RTK Query:

https://github.com/replayio/devtools/blob/main/packages/markerikson-stack-client-prototype/src/app/api.ts

Here's one endpoint from that file

    getSourceHitCounts: build.query<Dictionary<HitCount[]>, string>({
      queryFn: async sourceId => {
        const { lineLocations } = await client.Debugger.getPossibleBreakpoints(
          {
            sourceId,
          },
          sessionId
        );

        const hitCounts = await client.Debugger.getHitCounts(
          {
            sourceId,
            locations: lineLocations,
            maxHits: 250,
          },
          sessionId
        );

        const hitsByLine = groupBy(hitCounts.hits, entry => entry.location.line);
        return { data: hitsByLine };
      },
      keepUnusedDataFor: CACHE_DATA_PERMANENTLY,
    }),