自定义缓存字段的行为

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Person: {
4
      fields: {
5
        name: {
6
          read(name) {
7
            // Return the cached name, transformed to upper case
8
            return name.toUpperCase();
9
          }
10
        }
11
      },
12
    },
13
  },
14
});

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

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Person: {
4
      fields: {
5
        // If a field's TypePolicy would only include a read function,
6
        // you can optionally define the function like so, instead of
7
        // nesting it inside an object as shown in the previous example.
8
        name(name: string, { args }) {
9
          if (args && typeof args.maxLength === "number") {
10
            return name.substring(0, args.maxLength);
11
          }
12
          return name;
13
        },
14
      },
15
    },
16
  },
17
});

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Person: {
4
      fields: {
5
        fullName: {
6
          read(fullName = {
7
            firstName: "UNKNOWN FIRST NAME",
8
            lastName: "UNKNOWN LAST NAME",
9
          }) {
10
            return { ...fullName };
11
          },
12
        },
13
      },
14
    },
15
  },
16
});

1
query personWithFullName {
2
  fullName {
3
    firstName
4
    lastName
5
  }
6
}

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Person: {
4
      fields: {
5
        userId() {
6
          return localStorage.getItem("loggedInUserId");
7
        },
8
      },
9
    },
10
  },
11
});

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Agenda: {
4
      fields: {
5
        tasks: {
6
          merge(existing = [], incoming: any[]) {
7
            return [...existing, ...incoming];
8
          },
9
        },
10
      },
11
    },
12
  },
13
});

1
type Book {
2
  id: ID!
3
  title: String!
4
  author: Author!
5
}
6

7
type Author { # Has no key fields
8
  name: String!
9
  dateOfBirth: String!
10
}
11

12
type Query {
13
  favoriteBook: Book!
14
}

1
query BookWithAuthorName {
2
  favoriteBook {
3
    id
4
    author {
5
      name
6
    }
7
  }
8
}
9

10
query BookWithAuthorBirthdate {
11
  favoriteBook {
12
    id
13
    author {
14
      dateOfBirth
15
    }
16
  }
17
}

1
{
2
  "__typename": "Book",
3
  "id": "abc123",
4
  "author": {
5
    "__typename": "Author",
6
    "name": "George Eliot"
7
  }
8
}

1
{
2
  "__typename": "Book",
3
  "id": "abc123",
4
  "author": {
5
    "__typename": "Author",
6
    "dateOfBirth": "1819-11-22"
7
  }
8
}

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Book: {
4
      fields: {
5
        author: {
6
          merge(existing, incoming, { mergeObjects }) {
7
            return mergeObjects(existing, incoming);
8
          },
9
        },
10
      },
11
    },
12
  },
13
});

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Book: {
4
      fields: {
5
        author: {
6
          // Equivalent to options.mergeObjects(existing, incoming).
7
          merge: true,
8
        },
9
      },
10
    },
11
  },
12
});

1
query BookWithAuthorNames {
2
  favoriteBook {
3
    isbn
4
    title
5
    authors {
6
      name
7
    }
8
  }
9
}
10

11
query BookWithAuthorLanguages {
12
  favoriteBook {
13
    isbn
14
    title
15
    authors {
16
      language
17
    }
18
  }
19
}

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Book: {
4
      fields: {
5
        authors: {
6
          merge(existing: any[], incoming: any[], { readField, mergeObjects }) {
7
            const merged: any[] = existing ? existing.slice(0) : [];
8
            const authorNameToIndex: Record<string, number> = Object.create(null);
9
            if (existing) {
10
              existing.forEach((author, index) => {
11
                authorNameToIndex[readField<string>("name", author)] = index;
12
              });
13
            }
14
            incoming.forEach(author => {
15
              const name = readField<string>("name", author);
16
              const index = authorNameToIndex[name];
17
              if (typeof index === "number") {
18
                // Merge the new author data with the existing author data.
19
                merged[index] = mergeObjects(merged[index], author);
20
              } else {
21
                // First time we've seen this author in this array.
22
                authorNameToIndex[name] = merged.length;
23
                merged.push(author);
24
              }
25
            });
26
            return merged;
27
          },
28
        },
29
      },
30
    },
31
  },
32
});

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Book: {
4
      fields: {
5
        authors: {
6
          merge: mergeArrayByField<AuthorType>("name"),
7
        },
8
      },
9
    },
10
  },
11
});

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Book: {
4
      fields: {
5
        // No longer required!
6
        // author: {
7
        //   merge: true,
8
        // },
9
      },
10
    },
11

12
    Author: {
13
      merge: true,
14
    },
15
  },
16
});

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Agenda: {
4
      fields: {
5
        tasks: {
6
          merge(existing: any[], incoming: any[], { args }) {
7
            const merged = existing ? existing.slice(0) : [];
8
            // Insert the incoming elements in the right places, according to args.
9
            const end = args.offset + Math.min(args.limit, incoming.length);
10
            for (let i = args.offset; i < end; ++i) {
11
              merged[i] = incoming[i - args.offset];
12
            }
13
            return merged;
14
          },
15

16
          read(existing: any[], { args }) {
17
            // If we read the field before any data has been written to the
18
            // cache, this function will return undefined, which correctly
19
            // indicates that the field is missing.
20
            const page = existing && existing.slice(
21
              args.offset,
22
              args.offset + args.limit,
23
            );
24
            // If we ask for a page outside the bounds of the existing array,
25
            // page.length will be 0, and we should return undefined instead of
26
            // the empty array.
27
            if (page && page.length > 0) {
28
              return page;
29
            }
30
          },
31
        },
32
      },
33
    },
34
  },
35
});

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Agenda: {
4
      fields: {
5
        tasks: {
6
          merge(existing: any[], incoming: any[], { args, readField }) {
7
            const merged = existing ? existing.slice(0) : [];
8
            // Obtain a Set of all existing task IDs.
9
            const existingIdSet = new Set(
10
              merged.map(task => readField("id", task)));
11
            // Remove incoming tasks already present in the existing data.
12
            incoming = incoming.filter(
13
              task => !existingIdSet.has(readField("id", task)));
14
            // Find the index of the task just before the incoming page of tasks.
15
            const afterIndex = merged.findIndex(
16
              task => args.afterId === readField("id", task));
17
            if (afterIndex >= 0) {
18
              // If we found afterIndex, insert incoming after that index.
19
              merged.splice(afterIndex + 1, 0, ...incoming);
20
            } else {
21
              // Otherwise insert incoming at the end of the existing data.
22
              merged.push(...incoming);
23
            }
24
            return merged;
25
          },
26

27
          read(existing: any[], { args, readField }) {
28
            if (existing) {
29
              const afterIndex = existing.findIndex(
30
                task => args.afterId === readField("id", task));
31
              if (afterIndex >= 0) {
32
                const page = existing.slice(
33
                  afterIndex + 1,
34
                  afterIndex + 1 + args.limit,
35
                );
36
                if (page && page.length > 0) {
37
                  return page;
38
                }
39
              }
40
            }
41
          },
42
        },
43
      },
44
    },
45
  },
46
});

1
function afterIdLimitPaginatedFieldPolicy<T>() {
2
  return {
3
    merge(existing: T[], incoming: T[], { args, readField }): T[] {
4
      ...
5
    },
6
    read(existing: T[], { args, readField }): T[] {
7
      ...
8
    },
9
  };
10
}
11

12
const cache = new InMemoryCache({
13
  typePolicies: {
14
    Agenda: {
15
      fields: {
16
        tasks: afterIdLimitPaginatedFieldPolicy<Reference>(),
17
      },
18
    },
19
  },
20
});

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Book: {
4
      fields: {
5
        // No longer necessary!
6
        // author: {
7
        //   merge: true,
8
        // },
9
      },
10
    },
11

12
    Author: {
13
      merge: false,
14
    },
15
  },
16
});

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Query: {
4
      fields: {
5
        monthForNumber: {
6
          keyArgs: ["number"],
7
        },
8
      },
9
    },
10
  },
11
});

1
// These generic type parameters will be inferred from the provided policy in
2
// most cases, though you can use this type to constrain them more precisely.
3
type FieldPolicy<
4
  TExisting,
5
  TIncoming = TExisting,
6
  TReadResult = TExisting,
7
> = {
8
  keyArgs?: KeySpecifier | KeyArgsFunction | false;
9
  read?: FieldReadFunction<TExisting, TReadResult>;
10
  merge?: FieldMergeFunction<TExisting, TIncoming> | boolean;
11
};
12

13
type KeySpecifier = (string | KeySpecifier)[];
14

15
type KeyArgsFunction = (
16
  args: Record<string, any> | null,
17
  context: {
18
    typename: string;
19
    fieldName: string;
20
    field: FieldNode | null;
21
    variables?: Record<string, any>;
22
  },
23
) => string | KeySpecifier | null | void;
24

25
type FieldReadFunction<TExisting, TReadResult = TExisting> = (
26
  existing: Readonly<TExisting> | undefined,
27
  options: FieldFunctionOptions,
28
) => TReadResult;
29

30
type FieldMergeFunction<TExisting, TIncoming = TExisting> = (
31
  existing: Readonly<TExisting> | undefined,
32
  incoming: Readonly<TIncoming>,
33
  options: FieldFunctionOptions,
34
) => TExisting;
35

36
// These options are common to both read and merge functions:
37
interface FieldFunctionOptions {
38
  cache: InMemoryCache;
39

40
  // The final argument values passed to the field, after applying variables.
41
  // If no arguments were provided, this property will be null.
42
  args: Record<string, any> | null;
43

44
  // The name of the field, equal to options.field.name.value when
45
  // options.field is available. Useful if you reuse the same function for
46
  // multiple fields, and you need to know which field you're currently
47
  // processing. Always a string, even when options.field is null.
48
  fieldName: string;
49

50
  // The FieldNode object used to read this field. Useful if you need to
51
  // know about other attributes of the field, such as its directives. This
52
  // option will be null when a string was passed to options.readField.
53
  field: FieldNode | null;
54

55
  // The variables that were provided when reading the query that contained
56
  // this field. Possibly undefined, if no variables were provided.
57
  variables?: Record<string, any>;
58

59
  // Easily detect { __ref: string } reference objects.
60
  isReference(obj: any): obj is Reference;
61

62
  // Returns a Reference object if obj can be identified, which requires,
63
  // at minimum, a __typename and any necessary key fields. If true is
64
  // passed for the optional mergeIntoStore argument, the object's fields
65
  // will also be persisted into the cache, which can be useful to ensure
66
  // the Reference actually refers to data stored in the cache. If you
67
  // pass an ID string, toReference will make a Reference out of it. If
68
  // you pass a Reference, toReference will return it as-is.
69
  toReference(
70
    objOrIdOrRef: StoreObject | string | Reference,
71
    mergeIntoStore?: boolean,
72
  ): Reference | undefined;
73

74
  // Helper function for reading other fields within the current object.
75
  // If a foreign object or reference is provided, the field will be read
76
  // from that object instead of the current object, so this function can
77
  // be used (together with isReference) to examine the cache outside the
78
  // current object. If a FieldNode is passed instead of a string, and
79
  // that FieldNode has arguments, the same options.variables will be used
80
  // to compute the argument values. Note that this function will invoke
81
  // custom read functions for other fields, if defined. Always returns
82
  // immutable data (enforced with Object.freeze in development).
83
  readField<T = StoreValue>(
84
    nameOrField: string | FieldNode,
85
    foreignObjOrRef?: StoreObject | Reference,
86
  ): T;
87

88
  // Returns true for non-normalized StoreObjects and non-dangling
89
  // References, indicating that readField(name, objOrRef) has a chance of
90
  // working. Useful for filtering out dangling references from lists.
91
  canRead(value: StoreValue): boolean;
92

93
  // A handy place to put field-specific data that you want to survive
94
  // across multiple read function calls. Useful for field-level caching,
95
  // if your read function does any expensive work.
96
  storage: Record<string, any>;
97

98
  // Instead of just merging objects with { ...existing, ...incoming }, this
99
  // helper function can be used to merge objects in a way that respects any
100
  // custom merge functions defined for their fields.
101
  mergeObjects<T extends StoreObject | Reference>(
102
    existing: T,
103
    incoming: T,
104
  ): T | undefined;
105
}