use cache restore instead of field defs for Zone
This is just an implementation thing, but I realized we can just insert the Zone data into the initial Apollo cache, instead of doing weird field definitions I _do_ still want the @client tags in the queries though, to tell them not to make server requests at all
This commit is contained in:
parent
612e549ddc
commit
eab1b99052
1 changed files with 7 additions and 26 deletions
|
@ -2,8 +2,7 @@ import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client";
|
||||||
import { createPersistedQueryLink } from "apollo-link-persisted-queries";
|
import { createPersistedQueryLink } from "apollo-link-persisted-queries";
|
||||||
import gql from "graphql-tag";
|
import gql from "graphql-tag";
|
||||||
|
|
||||||
const cachedZones = require("./cached-data/zones.json");
|
import cachedZones from "./cached-data/zones.json";
|
||||||
const cachedZonesById = new Map(cachedZones.map((z) => [z.id, z]));
|
|
||||||
|
|
||||||
// Teach Apollo to load certain fields from the cache, to avoid extra network
|
// Teach Apollo to load certain fields from the cache, to avoid extra network
|
||||||
// requests. This happens a lot - e.g. reusing data from item search on the
|
// requests. This happens a lot - e.g. reusing data from item search on the
|
||||||
|
@ -93,29 +92,6 @@ const typePolicies = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
Zone: {
|
|
||||||
fields: {
|
|
||||||
depth: (depth, { readField }) => {
|
|
||||||
const id = readField("id");
|
|
||||||
return depth || cachedZonesById.get(id)?.depth || 0;
|
|
||||||
},
|
|
||||||
|
|
||||||
label: (label, { readField }) => {
|
|
||||||
const id = readField("id");
|
|
||||||
return label || cachedZonesById.get(id)?.label || `Zone #${id}`;
|
|
||||||
},
|
|
||||||
|
|
||||||
isCommonlyUsedByItems: (isCommonlyUsedByItems, { readField }) => {
|
|
||||||
const id = readField("id");
|
|
||||||
return (
|
|
||||||
isCommonlyUsedByItems ||
|
|
||||||
cachedZonesById.get(id)?.isCommonlyUsedByItems ||
|
|
||||||
false
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// The PersistedQueryLink in front of the HttpLink helps us send cacheable GET
|
// The PersistedQueryLink in front of the HttpLink helps us send cacheable GET
|
||||||
|
@ -125,13 +101,18 @@ const persistedQueryLink = createPersistedQueryLink({
|
||||||
});
|
});
|
||||||
const httpLink = createHttpLink({ uri: "/api/graphql" });
|
const httpLink = createHttpLink({ uri: "/api/graphql" });
|
||||||
|
|
||||||
|
const initialCache = {};
|
||||||
|
for (const zone of cachedZones) {
|
||||||
|
initialCache[`Zone:${zone.id}`] = { __typename: "Zone", ...zone };
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* apolloClient is the global Apollo Client instance we use for GraphQL
|
* apolloClient is the global Apollo Client instance we use for GraphQL
|
||||||
* queries. This is how we communicate with the server!
|
* queries. This is how we communicate with the server!
|
||||||
*/
|
*/
|
||||||
const client = new ApolloClient({
|
const client = new ApolloClient({
|
||||||
link: persistedQueryLink.concat(httpLink),
|
link: persistedQueryLink.concat(httpLink),
|
||||||
cache: new InMemoryCache({ typePolicies }),
|
cache: new InMemoryCache({ typePolicies }).restore(initialCache),
|
||||||
connectToDevTools: true,
|
connectToDevTools: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue