How to do quieuing graphql calls using ApolloClient in next.js?

Help
,
1

Ex.

const clientRef = useRef(initClient());

function initClient() {
    const authLink = setContext(async (_, options) => {
      const {
        headers = {
          'Accept-Language': 'en',
        },
      } = options;
      headers.Authorization = `Bearer ${token}`;
      return {
        headers,
      };
    });

    const client = new ApolloClient({
      link: ${url},
      cache: new InMemoryCache(),
      defaultOptions,
    });
    return client;
  }

here is my configuration and here is my query and mutation.

const handleQuery = async (params) => {
      const res = await clientRef.current.query(params);
      const { data, errors } = res;
      if (errors) {
         checkErrorForUnauthenticated(errors);
      }
      return { data };
};

const handleMutation = async (params) => {
      const res = await clientRef.current.mutate(params);
      const { data, errors } = res;
      if (errors) {
         checkErrorForUnauthenticated(errors);
      }
      return { data };
};

Problem:-

I have 3 apis on HOC and 5 apis in child component. so when access token expire after 1 API call. I have to call another endpoint to get access token and then want to call remain apis. but now problem is while doing call for refresh token other apis are fired with old token and got error.

2

Hi @Dhruvin_Patel :wave: I’d be happy to add another set of eyes here. I admit, though, that I’m a little confused about the use case. In particular, I’m curious as to why you have to make this many HTTP requests in order to manage authentication on the client side. This sentence stood out to me: “so when access token expire after 1 API call.” I’m interpreting this to mean that the credentials for a given service are valid only for one request. Is that the case for all the 8(?) HTTP requests you’re describing (3 in a higher-order component, 5 in a child component)?