I have a React app where I am using Apollo client to handle GraphQL queries and caching.
I have two GraphQL queries, one that fetches a whole menu and another that fetches top level menu sections.
I fetch the whole menu when I first load the app in an attempt to cache the menu data. I then call the query that fetches the menu top level sections which I would expect to fetch from the cache but for some reason the data is not available from the cache and must fetch from the network.
The first query that fetches the whole menu looks like this
query GetMenu(
$menuId: ID
$restaurantId: ID!
$filter: MenuSectionFilterInput
) {
getMenu(menuId: $menuId, restaurantId: $restaurantId) {
id
sections(filter: $filter) {
...Section
sections {
...Section
}
}
}
}
fragment Section on MenuSection {
id
items(restaurantId: $restaurantId) {
...Item
}
}
The second query that fetches all the top level sections looks like this
query GetMenuSections($restaurantId: ID!, $getMenuFilter: MenuFilterInput) {
getMenu(restaurantId: $restaurantId, filter: $getMenuFilter) {
id
sections {
name
id
}
}
}
Since the second query is run at a later stage than the first one, should the sections already be in the cache?
I am trying to run the following query with fetchPolicy: 'cache-only',
which fails because the data isn’t in the cache. It passes if I allow it to fetch from network.
useQuery(GET_MENU_SECTIONS,
{
fetchPolicy: 'cache-only',
variables: {
restaurantId,
getMenuFilter
}
}
);
Do the query args make a difference to how things get cached? Do both GetMenu
and GetMenuSections
need to have the same args in order for it to cache?
I don’t have any typePolicies
set up in my Apollo Client that would override default caching policies. I did try to add a custom policy for getMenu
but it didn’t work and shouldn’t even be necessary since both queries are querying for id
fields which is what should get used for caching.
How do I make the GetMenuSections
query use the already cached data?