Sharing/Passing query key between queries and mutations (revalidate)

[rkumorek]

Hey,

I've recently picked up RQ for a work project. I'm following the "leveraging query fn context" and query key factory.

For the app, it has few steps:

1. On first step, I send form data to server to create a session, example endpoint "/api/session"
2. On second step, I need to send different form data that updates the session on the server, example enpoint /api/session/{sessionId}/something
3. Similar to step 2
4. Similar to step 2 and 3

Basically in all queries/mutations except initial create one I need to access the sessionId value to pass it to the fetcher.

What is the best way of sharing the sessionId value between all other queries / mutations?

Currently my key factory looks like this:

const useQueryKeys = () => {
  const keys = {
    all: [{ flow: "something" }],
    session: (id: string) => [{ ...keys.all[0], sessionId: id }],
    rates: (id: string) => [{ ...keys.session(id)[0], entity: "rates" }],
    availability: (id: string, data) => [{ ...keys.session(id)[0], entity: "availability", ...data }],
    packages: (id: string) => [{ ...keys.session(id)[0], entity: "packages" }],
  } as const;

  return keys;
};

Also I am saving the sessionId value in the all key when initial session create resolves succesfuly.

function useSessionId() {
  const [keys] = useQueryKeys();
  const queryClient = useQueryClient();
  return queryClient.getQueryData<string>(keys.all);
}

Then I do custom query fn like this

function useRatesQuery() {
  const sessionId = useSessionId(); // retrieve sessionId
  const keys = useQueryKeys();

  return useQuery(
    keys.rates(sessionId), // pass the sessionId to get correct keys
    someFetcher,
    { enabled: !!sessionId }
  );
}

The project also has Redux so I tried storing the session in Redux but that doesn't feel right as I am storing server state in local state and that might change so then I have to worry to keep it in sync and also it creates issues when persisting in sessionStorate.

I hope I explained it clear enough but please let me know if not and maybe a small codesandbox with my simplified setup can be more helpful.

Any advice would be appreciated.

[s33h0w]

Hi, I think the current handling of sessionId (useSessionId) and query result (useRatesQuery) makes sense to me. I can't find a reason to use redux to store this global session again. I'm guessing that if you want to store dynamic sessions instead of just a fixed one with the redux store? This means that you can't get the sessionId by keys.all because it is a constant and can't map to a dynamic query result.