Using @vue/apollo-composable, how do i use local state?

[pgoy-dod]

I'm trying to use the local state as the source of truth (instead of vuex) for my application. The documentation for this doesn't exist for the Vue Apollo composable API, but it does for Vue Apollo v3.

Is this not possible in the Composable API? How do i do it, if it is?

The error i'm getting is that cache.writeData is not a function. Is there a different function or approach to initializing the cache data?

[smolinari]

@pgoy-dod - @vue/apollo-composable uses Apollo Client 3, which had a total rewrite of the cache system. That method no longer exists. The docs for version for on local state shows what needs to be done.

https://v4.apollo.vuejs.org/guide-advanced/local-state.html

Scott

[pgoy-dod]

Ah ha, i missed this completely in the documentation. Thank you for directing me!

[pgoy-dod]

Actually @smolinari, that document you linked provides the same instructions. I tried to use the apollo-cache-inmemory package like they show in the documentation, but later on get "this.cache.batch is not a function" instead. Some cursory searches on the internet say that this is because that cacher is deprecated and i should be using the one from @apollo/client instead.

I wondered if the other setup i had done might have helped, so i switched back to using the InMemoryCache provided by @apollo/client. But i still get the same "cache.writeData is not a function" message.

[smolinari]

You should use the inMemoryCache from @apollo/client and cache.writeData is replaced by the update* and write* methods in the new API.

https://www.apollographql.com/docs/react/api/cache/InMemoryCache/

Scott

[pgoy-dod]

Looks like i may have found my answer with the actual Apollo 3 documentation: https://www.apollographql.com/docs/react/caching/cache-interaction/#writequery