Apollo-client-devtools: Cache tab is empty even though Queries works as expected

[stoich]

I can see this issue has been reported previously but unfortunately a solution/workaround was not provided (it just resolved itself someone said) #215

The Dev Tools extension successfully connects to the Apollo client and I view the requests in Queries tab. However, the cache tab remains empty. How can we fix this?

[verekia]

Same here. I have a very simple hello world React project, data gets loaded via hooks, but nothing shows in the Cache tab.

    "@apollo/react-hooks": "3.0.1"
    "apollo-cache-inmemory": "1.6.3",
    "apollo-client": "2.6.4",
    "apollo-link-http": "1.5.15",

[Dizzienoo]

Also experiencing this issue. I am using the Web Socket Link, though have tried with the http one also.

[Dizzienoo]

Update: moved machines and the issue hasn't persisted. Had restarted original (problem) machine before posting so it's not a child restart issue.

[delgiudices]

Experiencing the same problem, cache is empty and I'm also using react hooks

[max10rogerio]

Same problem

[Schachte]

Also seeing this problem

[Schachte]

Had to wrap outside component with the apollo provider and it's working!

[dijbi]

@Schachte "Had to wrap outside component with the apollo provider and it's working!
ApolloProvider from "@apollo/react-hooks" or ApolloProvider from "react-apollo" ?
Thx

[Schachte]

@dijbi react-apollo

[sgoll]

For me, this happens if (and only if) my React app is wrapped in <React.StrictMode/> and the Apollo client is created inside one of the lifecycle functions of my root component.

The problem disappears and I can see "Cache" as well as the other tabs inside the devtools as soon as I either move new ApolloClient outside of the root component or disable strict mode.

My guess is that this has something to do with React intentionally double-invoking some of the component methods: https://reactjs.org/docs/strict-mode.html

[Heliozoa]

I ran into this issue, and my problem was a missing id field in the query. This might be documented somewhere but I couldn't find it, so I'll post this here in case it helps someone.

For example, this code results in an empty Cache tab.

const result = useQuery(gql`
  query {
    allBooks {
      title
    }
  }
`)

Whereas this code fills it with the results I'd expect.

const result = useQuery(gql`
  query {
    allBooks {
      title
      id
    }
  }
`)

Aside from the empty tab the caching seemed to work fine regardless. What also confused me was that with if I executed a different query that did have id, the data queried without id were in the Cache tab under the ROOT_QUERY, which is not there at all if only the id-less query is executed.

I'm using version 3.0.0-beta.39 of @apollo/client.

[ghacosta]

Same here, Apollo 3.0 and apollo-client-devtools v2.3.1 and nothing shows up on my Cache tab.

[nickyleach]

If you're like me, you may have missed the configuration section in the README. I was able to get the cache to populate after setting connectToDevTools: true in the ApolloClient constructor.

FWIW I'm using Apollo w/React Native and the React Native Debugger. Maybe that's why it needs to be set manually?

[jcreighton]

The initial issue here as been resolved. If you're experiencing this issue as of the latest release (2.3.1), please open a new issue.