Prevent Client Queries from re-running after route changes - apollo

Question

I am new to ApolloClient/GQL but I understand it does well with caching to prevent multiple queries. I have a <RootProvider /> in my app which when it mounts runs a query to get my list of accounts. Then the user selects their account, it 1) updates Global Redux provider, and 2) navigates to an account overview page. If i then "switch" my account (clear selectedAccount with setSelectedAccountId('')), the URL goes back to root and the query runs again. I have tried conditional query with useLazyQuery and i have tried skip option inside the useQuery itself, both without success. Skip itself will not even return cached data.
Is there a trick to making sure the data is cached between routes?
App Wrapper with Global Redux Store:
<Provider store={store}> //contains setSelectedAccountId action & selectedAccountId state
<Router >
<App />
</Router >
</Provider>
App:
<RootProvider
setSelectedAccountId={setSelectedAccountId}
selectedAccountId={selectedAccountId}
>
<Switch>
<Route exact path={routes.root}>
<Root setSelectedAccountId={setSelectedAccountId} />
</Route>
<Route exact path={routes.overview()}>
<OverviewProvider>
<Overview />
</OverviewProvider>
</Route>
</Switch>
</RootProvider>
RootProvider:
const RootProvider = ({
children,
selectedAccountId,
setSelectedAccountId,
}: RootProviderProps): ReactElement => {
const { loading, error, data } = useQuery<{ accounts: RootStateShape[] }>(GET_ACCOUNTS);
const [selectedAccountDetails, setSelectedAccountDetails] = useState<RootStateShape | null>(null);
if (loading) {
return <Loading />;
}
if (error) {
return <div>{JSON.stringify(error)}</div>;
}
return (
<RootStateContext.Provider
value={{ accounts: data?.accounts || [], selectedAccountDetails, setSelectedAccountDetails }}
>
{children}
</RootStateContext.Provider>
);
};
And the GET_ACCOUNTS Query itself:
const GET_ACCOUNTS = gql`
query getAccounts {
accounts(accountType: "installers") #rest(type: "AccountsPayload", path: "/accounts?{args}") {
accountId
accountName
isBillable
recordType
isActive
}
}
`;
I have tried to update the RootProvider to use useLazyQuery with a "mounted" state:
const [isMounted, setIsMounted] = useState(false)
const [lazyLoadAccounts, { loading, error, data }] = useLazyQuery<{ accounts: RootStateShape[] }>(
GET_ACCOUNTS
);
useEffect(() => {
if (!isMounted) {
lazyLoadAccounts();
setIsMounted(true);
}
}, [data, lazyLoadAccounts]);
I appreciate any insight.

Answer 1

The only solution I can think of is to make a copy of the data that is returned. That way I can use skip and still get a "copy" of the original data. I hate making a copy of stateful data like this, but it seems the only workaround?:
const RootProvider = (props: RootProviderProps): ReactElement => {
const [skip, setSkip] = useState(false);
const [queryData, setQueryData] = useState<{ accounts: RootStateShape[] }>();
const [selectedAccountDetails, setSelectedAccountDetails] = useState<RootStateShape | null>(null);
const { loading, error } = useQuery<{ accounts: RootStateShape[] }>(GET_ACCOUNTS, {
onCompleted: data => {
setQueryData(data);
setSkip(true);
},
skip,
});
if (loading) {
return <Loading />;
}
if (error) {
return <div>{JSON.stringify(error)}</div>;
}
return (
<RootStateContext.Provider
value={{
accounts: queryData?.accounts || [],
selectedAccountDetails,
setSelectedAccountDetails,
}}
>
{children}
</RootStateContext.Provider>