Redux createApi-prepareHeaders

[davidulman]

Hey I'm implmenting Redux to my project. I want to use for API calls the new createApi tool for it.

Its working but I have one issue, when I reload the page the token that is passed via Redux is null (The login machanizem isn't working with Redux createApi), when I navigate to other routes and I return to the createApi route it fetching the data. (I also verify that via console.logging the token)

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const profileApi = createApi({
reducerPath: 'profileApi',
baseQuery: fetchBaseQuery({
baseUrl: '(MY-API URL)/api/v1/',
prepareHeaders: (headers, { getState }) => {
  const token = getState().auth.userInformation.token;

  if (token) {
    headers.set('authorization', `Bearer ${token}`);
    headers.set('Accept', 'application/json');
  }
  console.log(token);
  return headers;
 },
}),
endpoints: (builder) => ({
getProfile: builder.query({
  query: () => 'profile/all',
  }),
 }),
});

export const { useGetProfileQuery } = profileApi;

In Store

 [profileApi.reducerPath]: profileApi.reducer,
 },
   middleware: (getDefaultMiddleware) =>
   getDefaultMiddleware().concat(profileApi.middleware),

Im Profile for testing

  const { data, error, isLoading } = useGetProfileQuery();

 {error ? (
    <p>error</p>
  ) : isLoading ? (
    <p>loading</p>
  ) : (
    <p>{data?.profiles?.[0]?.firstName}</p>
  )}

When I refreshing I only get <p>error</p>, when I reload or go to other path and return the Profile path I get the data.

[phryneas]

Are you maybe trying to do an api request before state.auth.userInformation.token has a value? You have to make sure that things in your application happen in the right order.

[davidulman]

You right!, I tried to console log each step of the auth componnent, I guess that it happend because in this project all the auth logic is on react context the redux provider wrap the whole componnent and the AuthProvider is the next in the tree.

I solved my problem with asyncThunk (because I use useEffect to first dispatch it), but it semms that createApi is actullay really good tool because of the auto caching, and I really want to use it but i dont know how I can call the auth logic before the createApi, (maybe handling my auth logic with createApi).

Can I solve this problem in other way ?

David

[phryneas]

Maybe make sure that value had time to load in before you render the component, or worst case check for the value and pass { skip: true } in until it is there.

[davidulman]

Hey,

Sorry I forgot to update.

I've fixed it in some way (maybe not the best but its working :D )

Just by creating prepareHeaders function, and calling a promise

const prepareHeaders = async (headers, { getState }) => {
  const userInformation = getState().auth.userInformation;
  if (userInformation && userInformation.token) {
    headers.set('authorization', `Bearer ${userInformation.token}`);
    headers.set('Accept', 'application/json');
  } else {
    await new Promise((resolve) => setTimeout(resolve, 100));
    await prepareHeaders(headers, { getState });
  }
};