TypeError: cache.writeData is not a function --> apollo-link-state

2
votes

I'm trying to manage local state with apollo-link-state. I've read that you're supposed to set resolvers, defaults and cache with withClientState(). So there we go:

const cache = new InMemoryCache();

const defaultState = {
    editGraph: {
        __typename: 'EditGraph',
        addNodeForm: 1,
        addRelForm: 'test',
        editGraphForm: false
    }
};

const stateLink = withClientState({
    defaults: defaultState,
    cache
});

const client = new ApolloClient({
    link: ApolloLink.from([
        stateLink,
        new HttpLink(),
    ]),
    cache
});

Then pass client to apolloProvider: <ApolloProvider client={client}> But I'm getting the error TypeError: cache.writeData is not a function. Which points out this line: const stateLink = withClientState({

I want to query and console.log the defaults. But I'm not getting anywhere so far.

From apollo's docs, youtube tutorials and blog articles it's clear that the cache.writeData error shouldn't appear. So why does it here?

3
javascriptreactjsapollo

3 Answers

3
votes

The problem was caused by unmet peer dependencies. I installed every dependency I use again and it's working now. So if you want to install and use apollo-link-state in a project you started a while ago, you need to update apollo-link-state its peer dependencies.

2
votes

This also tripped me up for a while, to give some more info, apollo-link-state used to path the method onto the apollo cache, but later apollo cache include writeData in it's api.

So if you are using apollo-cache-inmemory make sure you have > 1.1.5.

Here is the relevant PR: https://github.com/apollographql/apollo-link-state/pull/164/files

0
votes

If you are importing Inmemory cache from @apollo/client you need to do it this way

import {
  InMemoryCache
}

from apollo-cache-inmemory even on apollo version 3