why `refetch` in “useLazyQuery” of Apollo-client, doesn’t causing component re-rendering or update `data` in next js?

why `refetch` in “useLazyQuery” of Apollo-client, doesn’t causing component re-rendering or update `data` in next js?


0

I created a react-hook for useLazyQuery.

export const useCustomQuery = ({ query, variables, hasAuth, hasVar }: HookOptions) => {
  let options = {};
  if (Boolean(hasVar) && Boolean(variables)) {
    options = {
      ...options,
      variables,
    };
  }

  if (Boolean(hasAuth)) {
     let token = "";
     if (typeof window !== "undefined") {
       token = localStorage.getItem("accessToken") || "";
     }
    options = {
      ...options,
      context: {
        headers: {
          authorization: token,
        },
      },
    };
  }

  const [QueryFunc, { loading, error, data, refetch, called, networkStatus }] =
    useLazyQuery(query, options);

  return { QueryFunc, loading, error, data, refetch, called, networkStatus };
};

now I’m calling this hook in my context

const {
    QueryFunc: getUserAction,
    loading: userLoadingScreen,
    data: userData,
    refetch: refetchUserAction,
    called,
    error: userError,
    networkStatus,
  } = useCustomQuery({
    query: GET_USER,
    hasAuth: true,
  });

callilng getUser query, on button click:

 getUserAction({
        notifyOnNetworkStatusChange: true,
        fetchPolicy: "network-only",
        nextFetchPolicy: "network-only"
 });

After calling getUserAction on a button click, it causing the rerender, hence userData and userLoadingScreen values are changing as expected.

however, when I called refetchUserAction it doing the network request, but not updating userData and userLoadingScreen state

I created the apollo client something like this:

const createApolloClient = () => {
  return new ApolloClient({
    ssrMode: typeof window === "undefined",
    cache: new InMemoryCache(),
    connectToDevTools: process.env.NODE_ENV === "development",
    link: createUploadLink({
      uri: "url",
      headers: { "Apollo-Require-Preflight": "true" },
    }),
  });
};

calling the apollo-client on _app.tsx :

function MyApp({ Component, ...rest }: AppProps) {
 const client = createApolloClient();

 return (
    <ApolloProvider client={client}>
      <ThemeProvider theme={theme}>
        <AuthProvider> // this is the context where i'm calling the `getUser` query
              // other routes
        </AuthProvider>
      </ThemeProvider>
    </ApolloProvider>
  );
}

how can I solve this or what am I doing wrong here?
And one more thing, if I change route the getUser query, which present in the context, calling automatically and updating data and loading state. but on calling refetch, it just doing the network call, not re-rendering component or changing data state.


Load 4 more related questions


Show fewer related questions

0



Leave a Reply

Your email address will not be published. Required fields are marked *