I'll paraphrase this as best as I can. We have apollo graphql queries that fetch user info and permissions, but I'm running into issues with these queries actually completing when I control + click to open a new tab and wait until it is finished loading before I visit it. It seems that the query which fetches user permissions never actually returns anything.
Forcing the query's fetch policy to be network-only fixes this issue, and I have no idea why. We don't want this as a solution because:
A. It feels like a work around.
B. This is a rather intensive query. If we can cache the data we want to do that. It takes almost half a second longer when I force the query to be network-only.
For reference, the code looks like so:
const { loading, data } = useQuery(GET_INITIAL_DATA);
const { loading: permissionsLoading, data: permissionsData } = useQuery(
GET_PERMISSIONS_ASYNC,
{
skip: loading
}
);
// not worried about this first useEffect
useEffect(() => {
if (loading) {
return;
}
setViewer(data.viewer);
}, [data]);
// this useEffect doesn't make it past the early return
useEffect(() => {
if (permissionsLoading || !permissionsData) {
return;
}
setViewer({
...viewer,
...{ permissions: permissionsData.viewer.permissions },
...{ roles: permissionsData.viewer.roles }
});
}, [permissionsData]);
The code in the second useEffect should wait until permissionsData is done being fetched and then assigns those permissions to the viewer object. However, in the scenario above where I control + click and wait for the tab to open before visiting, permissionsData never comes in. It's as if the query is never actually completing/re-fetching.
Is there perhaps a concept I'm missing here? Why should it matter whether I'm actually viewing the tab or not for the queries to fire and fetch data properly? Is there a solution without having to force the query to be network-only?