2020-07-31 23:10:34 -07:00
|
|
|
import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client";
|
2020-09-04 05:59:35 -07:00
|
|
|
import { setContext } from "@apollo/client/link/context";
|
2020-05-14 15:51:08 -07:00
|
|
|
import { createPersistedQueryLink } from "apollo-link-persisted-queries";
|
2020-08-31 18:25:42 -07:00
|
|
|
import gql from "graphql-tag";
|
2020-05-14 15:51:08 -07:00
|
|
|
|
2020-09-01 18:02:59 -07:00
|
|
|
import cachedZones from "./cached-data/zones.json";
|
2020-08-19 17:50:05 -07:00
|
|
|
|
2020-08-31 18:25:42 -07:00
|
|
|
// 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
|
|
|
|
// outfit immediately!
|
2020-07-31 23:10:34 -07:00
|
|
|
const typePolicies = {
|
2020-05-14 15:51:08 -07:00
|
|
|
Query: {
|
2020-07-31 23:10:34 -07:00
|
|
|
fields: {
|
2020-09-01 18:59:05 -07:00
|
|
|
allZones: (_, { toReference }) => {
|
|
|
|
return cachedZones.map((z) =>
|
|
|
|
toReference({ __typename: "Zone", id: z.id }, true)
|
|
|
|
);
|
|
|
|
},
|
2020-07-31 23:21:09 -07:00
|
|
|
items: (_, { args, toReference }) => {
|
|
|
|
return args.ids.map((id) =>
|
|
|
|
toReference({ __typename: "Item", id }, true)
|
|
|
|
);
|
|
|
|
},
|
2020-08-27 23:09:07 -07:00
|
|
|
item: (_, { args, toReference }) => {
|
|
|
|
return toReference({ __typename: "Item", id: args.id }, true);
|
|
|
|
},
|
2020-08-29 13:23:41 -07:00
|
|
|
petAppearanceById: (_, { args, toReference }) => {
|
|
|
|
return toReference({ __typename: "PetAppearance", id: args.id }, true);
|
|
|
|
},
|
2020-08-31 18:25:42 -07:00
|
|
|
species: (_, { args, toReference }) => {
|
|
|
|
return toReference({ __typename: "Species", id: args.id }, true);
|
|
|
|
},
|
|
|
|
color: (_, { args, toReference }) => {
|
|
|
|
return toReference({ __typename: "Color", id: args.id }, true);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
Item: {
|
|
|
|
fields: {
|
|
|
|
appearanceOn: (appearance, { args, readField, toReference }) => {
|
|
|
|
// If we already have this exact appearance in the cache, serve it!
|
|
|
|
if (appearance) {
|
|
|
|
return appearance;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Otherwise, we're going to see if this is a standard color, in which
|
|
|
|
// case we can reuse the standard color appearance if we already have
|
|
|
|
// it! This helps for fast loading when switching between standard
|
|
|
|
// colors.
|
|
|
|
|
|
|
|
const { speciesId, colorId } = args;
|
|
|
|
|
|
|
|
// HACK: I can't find a way to do bigger-picture queries like this from
|
|
|
|
// Apollo's cache field reader API. Am I missing something? I
|
|
|
|
// don't love escape-hatching to the client like this, but...
|
|
|
|
let cachedData;
|
|
|
|
try {
|
2020-09-04 05:59:35 -07:00
|
|
|
cachedData = hackyEscapeHatchClient.readQuery({
|
2020-08-31 18:25:42 -07:00
|
|
|
query: gql`
|
|
|
|
query CacheLookupForItemAppearanceReader(
|
|
|
|
$speciesId: ID!
|
|
|
|
$colorId: ID!
|
|
|
|
) {
|
|
|
|
species(id: $speciesId) {
|
|
|
|
standardBodyId
|
|
|
|
}
|
|
|
|
color(id: $colorId) {
|
|
|
|
isStandard
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`,
|
|
|
|
variables: { speciesId, colorId },
|
|
|
|
});
|
|
|
|
} catch (e) {
|
|
|
|
// Some errors are expected while setting up the cache... not sure
|
|
|
|
// how to distinguish from Real errors. Just gonna ignore them all
|
|
|
|
// for now!
|
|
|
|
return undefined;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!cachedData) {
|
|
|
|
// This is an expected case while the page is loading.
|
|
|
|
return undefined;
|
|
|
|
}
|
|
|
|
|
|
|
|
const { species, color } = cachedData;
|
|
|
|
if (color.isStandard) {
|
|
|
|
const itemId = readField("id");
|
|
|
|
const bodyId = species.standardBodyId;
|
|
|
|
return toReference({
|
|
|
|
__typename: "ItemAppearance",
|
|
|
|
id: `item-${itemId}-body-${bodyId}`,
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
return undefined;
|
|
|
|
}
|
|
|
|
},
|
2020-05-14 15:51:08 -07:00
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
// The PersistedQueryLink in front of the HttpLink helps us send cacheable GET
|
|
|
|
// requests.
|
|
|
|
const persistedQueryLink = createPersistedQueryLink({
|
|
|
|
useGETForHashedQueries: true,
|
|
|
|
});
|
|
|
|
const httpLink = createHttpLink({ uri: "/api/graphql" });
|
2020-09-04 05:59:35 -07:00
|
|
|
const buildAuthLink = (getAuth0) =>
|
|
|
|
setContext(async (_, { headers }) => {
|
|
|
|
// Wait for auth0 to stop loading, so we can maybe get a token! We'll do
|
|
|
|
// this hackily by checking every 100ms until it's true.
|
|
|
|
await new Promise((resolve) => {
|
|
|
|
function check() {
|
|
|
|
if (getAuth0().isLoading) {
|
|
|
|
setTimeout(check, 100);
|
|
|
|
} else {
|
|
|
|
resolve();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
check();
|
|
|
|
});
|
|
|
|
|
|
|
|
const { isAuthenticated, getAccessTokenSilently } = getAuth0();
|
|
|
|
if (isAuthenticated) {
|
|
|
|
const token = await getAccessTokenSilently();
|
|
|
|
return {
|
|
|
|
headers: {
|
|
|
|
...headers,
|
|
|
|
authorization: token ? `Bearer ${token}` : "",
|
|
|
|
},
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
2020-05-14 15:51:08 -07:00
|
|
|
|
2020-09-01 18:02:59 -07:00
|
|
|
const initialCache = {};
|
|
|
|
for (const zone of cachedZones) {
|
|
|
|
initialCache[`Zone:${zone.id}`] = { __typename: "Zone", ...zone };
|
|
|
|
}
|
|
|
|
|
2020-05-14 15:51:08 -07:00
|
|
|
/**
|
|
|
|
* apolloClient is the global Apollo Client instance we use for GraphQL
|
|
|
|
* queries. This is how we communicate with the server!
|
|
|
|
*/
|
2020-09-04 05:59:35 -07:00
|
|
|
let hackyEscapeHatchClient = null;
|
|
|
|
const buildClient = (getAuth0) => {
|
|
|
|
const client = new ApolloClient({
|
|
|
|
link: buildAuthLink(getAuth0).concat(persistedQueryLink).concat(httpLink),
|
|
|
|
cache: new InMemoryCache({ typePolicies }).restore(initialCache),
|
|
|
|
connectToDevTools: true,
|
|
|
|
});
|
|
|
|
|
|
|
|
hackyEscapeHatchClient = client;
|
|
|
|
|
|
|
|
return client;
|
|
|
|
};
|
2020-08-31 18:25:42 -07:00
|
|
|
|
2020-09-04 05:59:35 -07:00
|
|
|
export default buildClient;
|