Writing nested object to local Apollo cache

Question

I have already looked at: Writing nested object to Apollo client cache

And I guess everywhere else on the internet.

So what I want to do is to write an object to the Apollo cache, to store it locally. This is my setup:

const cache = new InMemoryCache()
const client = new ApolloClient({
    uri: '/hasura/v1/graphql',
    cache,
    credentials: 'include',
})

Then I write this to initialize the cache, taken from: https://www.apollographql.com/docs/react/data/local-state/#querying-local-state

cache.writeData({
    data: {
        todos: [],
        visibilityFilter: 'SHOW_ALL',
        networkStatus: {
            __typename: 'NetworkStatus',
            id: 1,
            isConnected: false,
        },
    },
})

Now, when I want to query the cache using this query:

const lolquery = gql`{
    visibilityFilter @client
}`

const result = cache.readQuery({ query: lolquery })
console.log(result)

I can get the visibilityFilter and todos, but when I try to query for networkStatus i.e.,

const lolquery = gql`{
    networkStatus @client
}`

I get the following error:

Uncaught Invariant Violation: Invariant Violation: 10

Googling this error doesn't give me much of an answer.

Am I the only one experiencing this? Am I missing something really obvious?

Daniel Rearden Daniel Rearden · Accepted Answer · 2020-01-15T11:55:58

networkStatus was initialized as an object, so you have to query it with a subselection of one or more fields.

{
  networkStatus @client {
    isConnected
  }
}

Writing nested object to local Apollo cache

1 Answers