{"componentChunkName":"component---src-templates-post-js","path":"/pensieve/apollo-getcachkey-with-typescript","result":{"data":{"markdownRemark":{"html":"

Problem

\n

I’m currently working on the front end of an app that uses React + Apollo (via apollo-boost) + TypeScript. I’m to the point where I’m retrieving items from the cache in my resolvers using fragments1, which means I need to use getCacheKey() to search for the item's cache key using its ID field. (In this app, it would probably work to just assume the cache key is TypeName:UUID, but you never know, so we should probably do things properly.)

\n

Unfortunately, I have not been able to find the correct typings for getCacheKey(). When passing in cache as an argument to a resolver, one can import NormalizedCacheObject for the typings, like so:

\n
import { ApolloCache } from 'apollo-cache'\nimport { NormalizedCacheObject } from 'apollo-boost'\n\n...\n\nMutation: {\n  resolveSomeStuff: (\n    _: undefined,\n    { itemId, itemOptions }: { itemId: string; itemOptions: Array<string> },\n    { cache }: { cache: ApolloCache<NormalizedCacheObject> }  ) => {\n  /* Now we resolve everything. Global warming, world\n  hunger, over- and under-population.... */\n  ...\n  }\n}
\n

Inside my resolver, the Apollo docs tell me to get an item's cacheKey like this:

\n
const cacheKey = cache.getCacheKey({ __typename: 'Item', id: itemId });
\n

Unfortunately, if I use this formulation, tslint will yell at me:

\n
ERROR: \"Property 'getCacheKey' does not exist on type 'ApolloCache'.\"
\n

Solution

\n

Half an hour of Googling was unhelpful. But eventually I found someone reporting a similar-sounding problem as an issue over at the apollo devtools repo. I adopted his workaround, and it was effective for me. So here is the code inside my resolver:

\n
const cacheKey = cache['config'].dataIdFromObject({\n  __typename: 'Item',\n  id: itemId,\n});
\n
\n

This essentially does an end run around the problem by not calling getCacheKey() at all. I don't know enough about the inner workings of the Apollo client to understand why this works, but I kind of don't care.

\n
\n

If you don’t know what some or all of that means, this post probably isn’t for you.

","frontmatter":{"title":"Apollo getCacheKey() with TypeScript","description":"DEVELOPMENT","date":"2019-11-9","slug":"/pensieve/apollo-getcachkey-with-typescript","tags":["Apollo","React"]}}},"pageContext":{}}}