Not getting data for apollo cache. Using apollo3-cache-persist

Help
1

We’re trying to convert our web app into a PWA with offline features. I’m using apollo3-cache-persist to cache calls from graphql. And when I inspect, go to Application and check the cache, I can see that the query has been stored.

Specifically, I’m checking cast_blocks query. I checked the references it points to and it seems everything is stored in the cache:

ref data
ref data673×547 334 KB

But when I switch to offline and then refresh, when I check the Network tab, I can see that it still tries to make a Network call. Why is this? I was expecting it to retrieve data from the cache.

For reference, this is my client.ts:

import { ApolloClient, InMemoryCache } from "@apollo/client";
import { createUploadLink } from "apollo-upload-client";
import { LocalStorageWrapper, persistCache } from 'apollo3-cache-persist';

const uploadLink = createUploadLink({
  uri: "/api/graphql",
});

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        account_and_user_details_screen: {
          merge(existing, incoming) {
            if (existing) {
              return existing;
            }

            return incoming;
          },
        },
      },
    },
  },
})

await persistCache({
  cache,
  storage: new LocalStorageWrapper(window.localStorage),
  debug: true, // Enable debug mode for more logging
  maxSize: false, // Disable size limit for debugging purposes
});


export const apolloClient = new ApolloClient({
  cache: cache,
  link: uploadLink,
  connectToDevTools: true,
});

And this is the actual query:

export const QUERY_SCREEN = gql`
  query Cast_blocks($slug: String!) {
    cast_block_screen(slug: $slug) {
      id
      cast_blocks {
        id
        attributes {
          type
          properties {
            ... on CastBlockPropertiesButtonSearch {
              _dummy
            }
            ... on CastBlockPropertiesCarousel {
              items {
                src
                image
                url
              }
            }
            ... on CastBlockPropertiesCatalog {
              uuid
            }
            ... on CastBlockPropertiesMarkdown {
              content
            }
            ... on CastBlockPropertiesEmbed {
              url
            }
            ... on CastBlockPropertiesCourseStatus {
              heading
            }
          }
        }
      }
    }
  }
`;

export interface ScreenCastBlockListProps {}

export function ScreenCastBlockList({}: ScreenCastBlockListProps) {
  const { slug } = useParams();

  const { loading, error, data } = useQuery(QUERY_SCREEN, {
    variables: {
      slug: slug,
    },
  });

  useErrorHandler(error);

  const isGuest = useContext(isGuestContext);

  return (
    <NavBarLayout>
      {loading ? (
        <div data-testid="loading">
          <LoadingCentered />
        </div>
      ) : (
        <CastBlocks data={data} />
      )}
    </NavBarLayout>
  );
}
2

Hey @sylv :wave:

I’m not super familiar with the cache persist library as that is 3rd party maintained (despite the org), but something I noticed is that you don’t have possibleTypes defined in your client config. Its possible this might be contributing to the issue here. Could you try defining that option to see if that makes any impact? This is necessary to ensure interface/union types are properly understood by the cache.

You can also generate it automatically or use GraphQL codegen with the fragment-matcher plugin if you don’t want to define those types manually.

1 Like
3

Hello, thanks for your response! The problem turned out to be some other query that was a dependency of cast_blocks. I found out that apollo needs to be a ble to cache EVERYTHING before it will even get that data from cache, therefore, the downstream query needed to ba cached properly, too.

The network call just threw me off and I was investigating the wrong thing.

1 Like
4

Glad you found the issue!