RTKQ How to access QueryArg in prepareHeaders() ?

[dhlavaty]

When using RTK Query, how can I safely access QueryArg from my queries and mutations in prepareHeaders()?

I need to implement OAuth's Resource and Scope Aware Authorization. TL;DR: For some API calls, I need to prepare a different accessToken than for others.

Let's see a simplified example:

const baseQuery = fetchBaseQuery({
  baseUrl: '/',
  prepareHeaders: async (headers, api) => {
    let token;
    if (api.endpoint === "deletePokemon") {
      const { pokemonId } = api.queryArgs;           // <-- How to get THIS
      token = await getPokemonScopedOAuthToken(pokemonId);
    } else {
      token = await getGeneralOAuthToken();
    }

    headers.set('authorization', `Bearer ${token}`)
    return headers
  },
});

export const pokemonApi = createApi({
  baseQuery,
  endpoints: (builder) => ({
    getPokemonByName: builder.query({
      query: (pokemonId: string) => `pokemon/${pokemonId}`,
    }),

    deletePokemon: builder.mutation({
      query: ({ pokemonId }) => ({
        url: `pokemon/${pokemonId}`,
        method: 'DELETE',
      }),
    }),
  }),
});

I need to access pokemonId in prepareHeaders() function, when deleting pokemons and asynchronously prepare a correct OAuth token. But that information is not available in api object. Is there any other/elegant way how to implement it?

[EskiMojo14]

prepareHeaders has no access to the argument, you should instead do it in your query function:

const baseQuery = fetchBaseQuery({
  baseUrl: "/",
  prepareHeaders: async (headers, api) => {
    if (!headers.has("authorization")) {
      const token = await getGeneralOAuthToken();

      headers.set("authorization", `Bearer ${token}`);
    }
    return headers;
  },
});

export const pokemonApi = createApi({
  baseQuery,
  endpoints: (builder) => ({
    getPokemonByName: builder.query({
      query: (pokemonId: string) => ({
        url: `pokemon/${pokemonId}`,
        headers: {
          authorization: `Bearer ${getPokemonScopedOAuthToken(pokemonId)}`, // if we can do this synchronously
        },
      }),
    }),
    // if we can't do it synchronously, we need a queryFn
    deletePokemon: builder.mutation({
      queryFn: async ({ pokemonId }, api, extraOptions, fetchWithBQ) => {
        try {
          const token = await getPokemonScopedOAuthToken(pokemonId);
          return fetchWithBQ({
            url: `pokemon/${pokemonId}`,
            method: "DELETE",
            headers: {
              authorization: `Bearer ${token}`,
            },
          });
        } catch (e) {
          return { error: { status: "CUSTOM_ERROR", data: e } };
        }
      },
    }),
  }),
});

[dhlavaty]

Thank You, this works. 👍

Anyway, wouldn't it be simpler and clearer to make QueryArg data available in prepareHeaders()? Where can such a feature request be proposed?

[markerikson]

@dhlavaty we're collecting suggestions for RTKQ improvements over in #3692 - could you comment there?