forked from OpenNeo/impress-2020
Matchu
47d22ad25c
In this change, we cache the zones table as part of the JS build process. This keeps the database as our source of truth, while aggressively caching the data at deploy time. See the new README for some rationale! I tested this by pulling up dev Honeycomb, and observing that we no longer run db queries to `zones` in the new traces for the wardrobe page. (It's a good thing we did it this way, because I noticed some code in the server that was still loading the zone anyway, and fixed it here!)
57 lines
1.9 KiB
JavaScript
57 lines
1.9 KiB
JavaScript
import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client";
|
|
import { createPersistedQueryLink } from "apollo-link-persisted-queries";
|
|
|
|
const cachedZones = require("./cached-data/zones.json");
|
|
|
|
const typePolicies = {
|
|
Query: {
|
|
fields: {
|
|
// Teach Apollo how to serve `items` queries from the cache. That way,
|
|
// when you remove an item from your outfit, or add an item from search,
|
|
// Apollo knows it already has the data it needs and doesn't need to ask
|
|
// the server again!
|
|
items: (_, { args, toReference }) => {
|
|
return args.ids.map((id) =>
|
|
toReference({ __typename: "Item", id }, true)
|
|
);
|
|
},
|
|
|
|
// Teach Apollo how to serve `petAppearance` queries from the cache. That
|
|
// way, when you switch pet poses, Apollo knows it already has the
|
|
// appearance data and doesn't need to ask the server again!
|
|
petAppearance: (_, { args, toReference }) => {
|
|
const { speciesId, colorId, pose } = args;
|
|
const id = `${speciesId}-${colorId}-${pose}`;
|
|
return toReference({ __typename: "PetAppearance", id }, true);
|
|
},
|
|
},
|
|
},
|
|
|
|
Zone: {
|
|
fields: {
|
|
depth: (depth, { readField }) => {
|
|
return depth || cachedZones[readField("id")].depth;
|
|
},
|
|
|
|
label: (label, { readField }) => {
|
|
return label || cachedZones[readField("id")].label;
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
// The PersistedQueryLink in front of the HttpLink helps us send cacheable GET
|
|
// requests.
|
|
const persistedQueryLink = createPersistedQueryLink({
|
|
useGETForHashedQueries: true,
|
|
});
|
|
const httpLink = createHttpLink({ uri: "/api/graphql" });
|
|
|
|
/**
|
|
* apolloClient is the global Apollo Client instance we use for GraphQL
|
|
* queries. This is how we communicate with the server!
|
|
*/
|
|
export default new ApolloClient({
|
|
link: persistedQueryLink.concat(httpLink),
|
|
cache: new InMemoryCache({ typePolicies }),
|
|
});
|