How to get all cache data using reactjs @apollo/client v3

user_11497165 0
Viewed 3187

Is there anyway that I can check all the cache, eg: changes within apollo for debugging. Something like redux store, where you can view the whole state tree.

They mentioned:

The cache stores the objects by ID in a flat lookup table. https://www.apollographql.com/docs/react/caching/cache-configuration/

Any way to display/console the whole lookup table?

apollo-client react-apollo
2 Answers

For @apollo/client v3

Found the answer, if anyone is interested.

  1. Through InMemoryCache

You can console log the cache object where you create with InMemoryCache. You should be able to find it under your created cache:

const cache = new InMemoryCache({"...Your option"})
console.log(cache.data) // <- Your cache query
  1. Through browser console

Through browser, use console to log data

__APOLLO_CLIENT__.cache.data
  1. Through apollo v3

Access through apollo client cache

const client = useApolloClient();
const serializedState = client.cache.extract();
console.log(serializedState) <- your cache query
user_114971650

I just installed Apollo Client extension for Chrome, seem to work, there is now "Apollo" tab in the dev tools

https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm?hl=en-US

I used "readQuery" method to get data from cache, might be not best way to do it.

import { useApolloClient, gql } from '@apollo/client';

...

const WEBSITE_TITLE = gql`
  query GetSitewide {
    sitewide {
      data {
        attributes {
          header {
            __typename
            id
            siteTitle
          }
        }
      }
    }
  }
`;

...

function WebsiteTitle() {
  const client = useApolloClient();
  const {
    sitewide: {
      data: {
        attributes: { header },
      },
    },
  } = client.readQuery({
    query: WEBSITE_TITLE,
  });

  const { siteTitle } = header;

  return <> {siteTitle} </>;
}

export default WebsiteTitle;
user_34875790
Related