配置 Apollo 客户端缓存

1
import { InMemoryCache, ApolloClient } from '@apollo/client';
2

3
const client = new ApolloClient({
4
  // ...other arguments...
5
  cache: new InMemoryCache(options)
6
});

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Product: {
4
      // In an inventory management system, products might be identified
5
      // by their UPC.
6
      keyFields: ["upc"],
7
    },
8
    Person: {
9
      // In a user account system, the combination of a person's name AND email
10
      // address might uniquely identify them.
11
      keyFields: ["name", "email"],
12
    },
13
    Book: {
14
      // If one of the keyFields is an object with fields of its own, you can
15
      // include those nested keyFields by using a nested array of strings:
16
      keyFields: ["title", "author", ["name"]],
17
    },
18
    AllProducts: {
19
      // Singleton types that have no identifying field can use an empty
20
      // array for their keyFields.
21
      keyFields: [],
22
    },
23
  },
24
});

1
import { defaultDataIdFromObject } from '@apollo/client';
2

3
const cache = new InMemoryCache({
4
  dataIdFromObject(responseObject) {
5
    switch (responseObject.__typename) {
6
      case 'Product': return `Product:${responseObject.upc}`;
7
      case 'Person': return `Person:${responseObject.name}:${responseObject.email}`;
8
      default: return defaultDataIdFromObject(responseObject);
9
    }
10
  }
11
});

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Person: {
4
      fields: {
5
        name: {
6
          read(name = "UNKNOWN NAME") {
7
            return name.toUpperCase();
8
          }
9
        },
10
      },
11
    },
12
  },
13
});
14

15
// Add a type policy to the cache.
16
cache.policies.addTypePolicies({
17
  Person: {
18
    fields: {
19
      email: {
20
        read(email = "[email protected]") {
21
          return email;
22
        },
23
      },
24
    },
25
  },
26
});

1
type TypePolicy = {
2
  // Allows defining the primary key fields for this type, either using an
3
  // array of field names, a function that returns an arbitrary string, or
4
  // false to disable normalization for objects of this type.
5
  keyFields?: KeySpecifier | KeyFieldsFunction | false;
6

7
  // If your schema uses a custom __typename for any of the root Query,
8
  // Mutation, and/or Subscription types (rare), set the corresponding
9
  // field below to true to indicate that this type serves as that type.
10
  queryType?: true,
11
  mutationType?: true,
12
  subscriptionType?: true,
13

14
  fields?: {
15
    [fieldName: string]:
16
      | FieldPolicy<StoreValue>
17
      | FieldReadFunction<StoreValue>;
18
  }
19
};
20

21
// Recursive type aliases are coming in TypeScript 3.7, so this isn't the
22
// actual type we use, but it's what it should be:
23
type KeySpecifier = (string | KeySpecifier)[];
24

25
type KeyFieldsFunction = (
26
  object: Readonly<StoreObject>,
27
  context: {
28
    typename: string;
29
    selectionSet?: SelectionSetNode;
30
    fragmentMap?: FragmentMap;
31
  },
32
) => string | null | void;

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    UnconventionalRootQuery: {
4
      // The RootQueryFragment can only match if the cache knows the __typename
5
      // of the root query object.
6
      queryType: true,
7
    },
8
  },
9
});
10

11
const result = cache.readQuery({
12
  query: gql`
13
    query MyQuery {
14
      ...RootQueryFragment
15
    }
16
    fragment RootQueryFragment on UnconventionalRootQuery {
17
      field1
18
      field2 {
19
        subfield
20
      }
21
    }
22
  `,
23
});
24

25
const equivalentResult = cache.readQuery({
26
  query: gql`
27
    query MyQuery {
28
      field1
29
      field2 {
30
        subfield
31
      }
32
    }
33
  `,
34
});