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.