Apollo-client: `InMemoryCacheConfig` interface has no `cacheRedirects` property

Created on 23 Feb 2020  ·  9Comments  ·  Source: apollographql/apollo-client

Intended outcome:

I am trying to use cache redirects as recommended in Apollo Client 3.0 documentation
and I guess it should work as as in the docs. Or docs should change to match the actual implementation

Actual outcome:

The tsc complains that InMemoryCacheConfig has no cacheRedirects property.

Screenshot 2020-02-23 at 19 33 14
Screenshot 2020-02-23 at 19 33 30
Screenshot 2020-02-23 at 19 33 35

How to reproduce the issue:

Install @apollo/client at version 3.0.0-beta.37, follow the documentation, see the error.
Versions

    @apollo/client: ^3.0.0-beta.37 => 3.0.0-beta.37 
    apollo: ^2.23.0 => 2.23.0 
    apollo-link-error: ^1.1.12 => 1.1.12 
📝 documentation

Most helpful comment

Something like this?

new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        user(existingDataFromCache: Reference | undefined, { args, toReference }) {
          return existingDataFromCache || toReference({
            __typename: "User",
            id: args.id,
          });
        },
      },
    },
  },
})

I think the piece you're missing is options.toReference (and options.args perhaps).

You don't necessarily have to pay any attention to existingDataFromCache, if this is a purely client-only field, meaning you won't be writing any Query.user data from the server into the cache:

new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        user(_, { args, toReference }) {
          return toReference({
            __typename: "User",
            id: args.id,
          });
        },
      },
    },
  },
})

All 9 comments

The cacheRedirects API has been removed in AC3, since its use cases are much better realized using field policies (and specifically read functions that return Reference objects): https://deploy-preview-5677--apollo-client-docs.netlify.com/docs/react/v3.0-beta/caching/cache-field-behavior/

Sorry for the misleading documentation! It's still a work in progress (hence the "beta" tag), and we will definitely fix this before the final release.

@benjamn

Sorry for the misleading documentation! It's still a work in progress (hence the "beta" tag), and we will definitely fix this before the final release.

That's understandable. Thanks for the link!

I'll leave this issue open until we fix the underlying documentation issue. Feel free to ask any questions you have about the new API in the meantime!

@benjamn could you provide a minimal FieldPolicy example for a User query that should return a UserType object by ID, so that the user object is retrieved from the cache if it is found there? I am not sure how to instantiate a Reference object.

Something like this?

new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        user(existingDataFromCache: Reference | undefined, { args, toReference }) {
          return existingDataFromCache || toReference({
            __typename: "User",
            id: args.id,
          });
        },
      },
    },
  },
})

I think the piece you're missing is options.toReference (and options.args perhaps).

You don't necessarily have to pay any attention to existingDataFromCache, if this is a purely client-only field, meaning you won't be writing any Query.user data from the server into the cache:

new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        user(_, { args, toReference }) {
          return toReference({
            __typename: "User",
            id: args.id,
          });
        },
      },
    },
  },
})

Hello, I'm a bit confused with the new API, is there a way I can do something like "look in the cache for this id (I suppose this part is working with the provided example), if it's not there, then query the server"? I always wanted this behavior in the old version of apollo but right now I haven't been able to achieve it. For example, sometimes you will go to the list page of a CRUD and then you have all the items in the cache when you go to the detail page, but if you go to the detail page of an item directly (no list page first) then the details of the item are not in the cache and I want to query directly. Can you guide me on how to achieve this?

This is what the previous example is about... Basically if you return undefined it will fetch from the server, otherwise it will use the returned result.

Oh great, thanks for explaining :) I wasn't sure if this was the default behavior.

Updated docs showing the removal of cacheRedirects is available in https://github.com/apollographql/apollo-client/pull/6429, and will be published soon. Thanks!

Was this page helpful?
0 / 5 - 0 ratings