This is my client-side function that handles clicking a Logout button:
const client = useApolloClient();
const [Logout] = useMutation(LOGOUT);
const handleLogout = async (e) => {
await Logout();
const { data } = await props.fetchUser();
if (data) {
let reset = await client.resetStore();
}
};
This is my logout resolver (the mutation takes in no arguments and returns boolean):
logout:(_, __, { res }) => {
res.clearCookie('refresh-token');
res.clearCookie('access-token');
return true;
}
For some reason, client.resetStore() executes a query I have called getRegionPath, which takes in a String. This function is only called in a few of my React components, locked behind an auth, so once logged out, these components are not accessible and cannot be rendered or routed to.
Here is my getRegionPath resolver.
getRegionPath: async (_, args) => {
const {region_id} = args;
const objectId = new ObjectId(region_id);
const region = await Region.findOne({_id: objectId});
if (region.parentRegion == null) {
return [];
}
else {
const path = await regionPath(region.parentRegion);
return path;
}
}
I have no idea why client.resetStore() might make a call to getRegionPath, none of my components with that query ever run, yet I still get this error:
"Argument passed in must be a single String of 12 bytes or a string of 24 hex characters"
How could resetStore() possibly call another query? Any ideas?
EDIT:
After looking into it, it seems resetStore() refetches active queries. How can I make my getRegionPath query not be active? Here is where it is called conditionally:
{auth ?
<ul>
<WNavItem>
<Breadcrumbs user={props.user} currentRegion={currentRegion} handleSetCurrentRegion={handleSetCurrentRegion}/>
</WNavItem>
</ul> : <></>}
And the component:
const Breadcrumbs = (props) => {
console.log("getting path from breadcrumbs");
const {data} = useQuery(GET_REGION_PATH, {variables: {region_id: props.currentRegion}}, {fetchPolicy: 'network-only'})
if (data) { return (...) }
else return (<></>)
};