How to set authentication using following code in which I am using urql as client to fetch GraphQL APIs

Question

 const client = new Client({
  url: senseopsHTTPServerURL,
  exchanges: [
    cacheExchange,
    authExchange(async utils =>{
      let token = initializeAuthState();
      return{ 
        addAuthToOperation(operation){
          if(!token) return operation;
          return utils.appendHeaders(operation,{
            Authorization:token,
          })
        },
      }
    }),
    fetchExchange,
    ...defaultExchanges,
    subscriptionExchange({
      forwardSubscription: (operation) => ({
        subscribe: (sink) => ({
          unsubscribe: wsClient.subscribe(operation, sink),
        }),
      }),
    }),
  ],
});

It's a front end code. I am using Reactjs.

Using above code how can I set headers to every request it make to GraphQL APIs.

Answer 1

I solved it by using this following code.

    const client = new Client({
  url: "myBackendServerName",
  fetchOptions: () => {
    const token = localStorage.getItem("TOKEN_KEY");
    return {
      headers: { authorization: token ? token : '' },
    };
  },
  exchanges: [
    cacheExchange,
    ...defaultExchanges,
    subscriptionExchange({
      forwardSubscription: (operation) => ({
        subscribe: (sink) => ({
          unsubscribe: wsClient.subscribe(operation, sink),
        }),
      }),
    }),
  ],
});