OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

apollo client 3 initial upgrade

Browse source 
Some bugs remaining… outfit items don't show up at first, and item search and scrolling seems _very_ weird, wearing is broken too…
This commit is contained in:
Emi Matchu 2020-07-31 23:10:34 -07:00
parent bdef19e775
commit 8211444d67
10 changed files with 72 additions and 142 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@apollo/react-hooks": "^3.1.5",
"@apollo/client": "^3.1.1",
"@apollographql/graphql-playground-html": "^1.6.24",
"@chakra-ui/core": "^1.0.0-rc.0",
"@chakra-ui/icons": "^1.0.0-rc.0",
@ -12,7 +12,6 @@
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"apollo-boost": "^0.4.7",
"apollo-link-persisted-queries": "^0.2.2",
"apollo-server": "^2.12.0",
"apollo-server-core": "^2.12.0",

2
src/app/App.js
View file

@ -1,5 +1,5 @@
import React from "react";
import { ApolloProvider } from "@apollo/react-hooks";
import { ApolloProvider } from "@apollo/client";
import { CSSReset, ChakraProvider } from "@chakra-ui/core";
import theme from "@chakra-ui/theme";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

2
src/app/HomePage.js
View file

@ -3,7 +3,7 @@ import { css } from "emotion";
import gql from "graphql-tag";
import { Box, Button, Flex, Input, useTheme, useToast } from "@chakra-ui/core";
import { useHistory } from "react-router-dom";
import { useLazyQuery } from "@apollo/react-hooks";
import { useLazyQuery } from "@apollo/client";
import { Heading1, usePageTitle } from "./util";
import OutfitPreview from "./components/OutfitPreview";

2
src/app/WardrobePage/PosePicker.js
View file

@ -1,6 +1,6 @@
import React from "react";
import gql from "graphql-tag";
import { useQuery } from "@apollo/react-hooks";
import { useQuery } from "@apollo/client";
import { css, cx } from "emotion";
import {
Box,

2
src/app/WardrobePage/SearchPanel.js
View file

@ -1,7 +1,7 @@
import React from "react";
import gql from "graphql-tag";
import { Box, Text, VisuallyHidden } from "@chakra-ui/core";
import { useQuery } from "@apollo/react-hooks";
import { useQuery } from "@apollo/client";
import { Delay, Heading1, useDebounce } from "../util";
import { Item, ItemListContainer, ItemListSkeleton } from "./Item";

2
src/app/WardrobePage/useOutfitState.js
View file

@ -1,7 +1,7 @@
import React from "react";
import gql from "graphql-tag";
import produce, { enableMapSet } from "immer";
import { useQuery, useApolloClient } from "@apollo/react-hooks";
import { useQuery, useApolloClient } from "@apollo/client";
import { itemAppearanceFragment } from "../components/useOutfitAppearance";

18
src/app/apolloClient.js
View file

@ -1,24 +1,24 @@
import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client";
import { createPersistedQueryLink } from "apollo-link-persisted-queries";
import { createHttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
import ApolloClient from "apollo-client";
const cacheRedirects = {
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, { getCacheKey }) =>
args.ids.map((id) => getCacheKey({ __typename: "Item", id })),
items: (_, { args, toReference }) =>
args.ids.map((id) => toReference({ __typename: "Item", id })),
// 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, { getCacheKey }) => {
petAppearance: (_, { args, toReference }) => {
const { speciesId, colorId, pose } = args;
const id = `${speciesId}-${colorId}-${pose}`;
return getCacheKey({ __typename: "PetAppearance", id });
return toReference({ __typename: "PetAppearance", id });
},
},
},
};
@ -36,5 +36,5 @@ const httpLink = createHttpLink({ uri: "/api/graphql" });
*/
export default new ApolloClient({
link: persistedQueryLink.concat(httpLink),
cache: new InMemoryCache({ cacheRedirects }),
cache: new InMemoryCache({ typePolicies }),
});

2
src/app/components/SpeciesColorPicker.js
View file

@ -1,6 +1,6 @@
import React from "react";
import gql from "graphql-tag";
import { useQuery } from "@apollo/react-hooks";
import { useQuery } from "@apollo/client";
import { Box, Flex, Select, Text } from "@chakra-ui/core";
import { Delay, useFetch } from "../util";

2
src/app/components/useOutfitAppearance.js
View file

@ -1,6 +1,6 @@
import React from "react";
import gql from "graphql-tag";
import { useQuery } from "@apollo/react-hooks";
import { useQuery } from "@apollo/client";
/**
* useOutfitAppearance downloads the outfit's appearance data, and returns

161
yarn.lock
View file

@ -2,6 +2,24 @@
# yarn lockfile v1
"@apollo/client@^3.1.1":
version "3.1.1"
resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.1.1.tgz#7d57d037be8ee93694fbf82579f703e635c836c1"
integrity sha512-c5DxrU81p0B5BsyBXm+5uPJqLCX2epnBsd87PXfRwzDLbp/NiqnWp6a6c5vT5EV2LwJuCq1movmKthoy0gFb0w==
dependencies:
"@types/zen-observable" "^0.8.0"
"@wry/context" "^0.5.2"
"@wry/equality" "^0.2.0"
fast-json-stable-stringify "^2.0.0"
graphql-tag "^2.11.0"
hoist-non-react-statics "^3.3.2"
optimism "^0.12.1"
prop-types "^15.7.2"
symbol-observable "^1.2.0"
ts-invariant "^0.4.4"
tslib "^1.10.0"
zen-observable "^0.8.14"
"@apollo/protobufjs@^1.0.3":
version "1.0.3"
resolved "https://registry.yarnpkg.com/@apollo/protobufjs/-/protobufjs-1.0.3.tgz#02c655aedd4ba7c7f64cbc3d2b1dd9a000a391ba"
@ -21,24 +39,6 @@
"@types/node" "^10.1.0"
long "^4.0.0"
"@apollo/react-common@^3.1.4":
version "3.1.4"
resolved "https://registry.yarnpkg.com/@apollo/react-common/-/react-common-3.1.4.tgz#ec13c985be23ea8e799c9ea18e696eccc97be345"
integrity sha512-X5Kyro73bthWSCBJUC5XYQqMnG0dLWuDZmVkzog9dynovhfiVCV4kPSdgSIkqnb++cwCzOVuQ4rDKVwo2XRzQA==
dependencies:
ts-invariant "^0.4.4"
tslib "^1.10.0"
"@apollo/react-hooks@^3.1.5":
version "3.1.5"
resolved "https://registry.yarnpkg.com/@apollo/react-hooks/-/react-hooks-3.1.5.tgz#7e710be52461255ae7fc0b3b9c2ece64299c10e6"
integrity sha512-y0CJ393DLxIIkksRup4nt+vSjxalbZBXnnXxYbviq/woj+zKa431zy0yT4LqyRKpFy9ahMIwxBnBwfwIoupqLQ==
dependencies:
"@apollo/react-common" "^3.1.4"
"@wry/equality" "^0.1.9"
ts-invariant "^0.4.4"
tslib "^1.10.0"
"@apollographql/apollo-tools@^0.4.3":
version "0.4.7"
resolved "https://registry.yarnpkg.com/@apollographql/apollo-tools/-/apollo-tools-0.4.7.tgz#6ba9e0fa872128fbfc82a5ded1447fde932a0169"
@ -2385,11 +2385,6 @@
resolved "https://registry.yarnpkg.com/@types/node/-/node-13.9.2.tgz#ace1880c03594cc3e80206d96847157d8e7fa349"
integrity sha512-bnoqK579sAYrQbp73wwglccjJ4sfRdKU7WNEZ5FW4K2U6Kc0/eZ5kvXG0JKsEKFB50zrFmfFt52/cvBbZa7eXg==
"@types/node@>=6":
version "13.13.2"
resolved "https://registry.yarnpkg.com/@types/node/-/node-13.13.2.tgz#160d82623610db590a64e8ca81784e11117e5a54"
integrity sha512-LB2R1Oyhpg8gu4SON/mfforE525+Hi/M1ineICEDftqNVTyFg1aRIeGuTvXAoWHc4nbrFncWtJgMmoyRvuGh7A==
"@types/node@^10.1.0":
version "10.17.21"
resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.21.tgz#c00e9603399126925806bed2d9a1e37da506965e"
@ -2708,21 +2703,27 @@
"@webassemblyjs/wast-parser" "1.8.5"
"@xtuc/long" "4.2.2"
"@wry/context@^0.4.0":
version "0.4.4"
resolved "https://registry.yarnpkg.com/@wry/context/-/context-0.4.4.tgz#e50f5fa1d6cfaabf2977d1fda5ae91717f8815f8"
integrity sha512-LrKVLove/zw6h2Md/KZyWxIkFM6AoyKp71OqpH9Hiip1csjPVoD3tPxlbQUNxEnHENks3UGgNpSBCAfq9KWuag==
"@wry/context@^0.5.2":
version "0.5.2"
resolved "https://registry.yarnpkg.com/@wry/context/-/context-0.5.2.tgz#f2a5d5ab9227343aa74c81e06533c1ef84598ec7"
integrity sha512-B/JLuRZ/vbEKHRUiGj6xiMojST1kHhu4WcreLfNN7q9DqQFrb97cWgf/kiYsPSUCAMVN0HzfFc8XjJdzgZzfjw==
dependencies:
"@types/node" ">=6"
tslib "^1.9.3"
"@wry/equality@^0.1.2", "@wry/equality@^0.1.9":
"@wry/equality@^0.1.2":
version "0.1.11"
resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.1.11.tgz#35cb156e4a96695aa81a9ecc4d03787bc17f1790"
integrity sha512-mwEVBDUVODlsQQ5dfuLUS5/Tf7jqUKyhKYHmVi4fPB6bDMOfWvUPJmKgS1Z7Za/sOI3vzWt4+O7yCiL/70MogA==
dependencies:
tslib "^1.9.3"
"@wry/equality@^0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.2.0.tgz#a312d1b6a682d0909904c2bcd355b02303104fb7"
integrity sha512-Y4d+WH6hs+KZJUC8YKLYGarjGekBrhslDbf/R20oV+AakHPINSitHfDRQz3EGcEWc1luXYNUvMhawWtZVWNGvQ==
dependencies:
tslib "^1.9.3"
"@xtuc/ieee754@^1.2.0":
version "1.2.0"
resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@ -2911,21 +2912,6 @@ anymatch@~3.1.1:
normalize-path "^3.0.0"
picomatch "^2.0.4"
apollo-boost@^0.4.7:
version "0.4.7"
resolved "https://registry.yarnpkg.com/apollo-boost/-/apollo-boost-0.4.7.tgz#b0680ab0893e3f8b1ab1058dcfa2b00cb6440d79"
integrity sha512-jfc3aqO0vpCV+W662EOG5gq4AH94yIsvSgAUuDvS3o/Z+8Joqn4zGC9CgLCDHusK30mFgtsEgwEe0pZoedohsQ==
dependencies:
apollo-cache "^1.3.4"
apollo-cache-inmemory "^1.6.5"
apollo-client "^2.6.7"
apollo-link "^1.0.6"
apollo-link-error "^1.0.3"
apollo-link-http "^1.3.1"
graphql-tag "^2.4.2"
ts-invariant "^0.4.0"
tslib "^1.10.0"
apollo-cache-control@^0.9.1:
version "0.9.1"
resolved "https://registry.yarnpkg.com/apollo-cache-control/-/apollo-cache-control-0.9.1.tgz#2af4c53ef697a87808285a25f2b93ca0f183880c"
@ -2934,39 +2920,6 @@ apollo-cache-control@^0.9.1:
apollo-server-env "^2.4.3"
graphql-extensions "^0.11.1"
apollo-cache-inmemory@^1.6.5:
version "1.6.5"
resolved "https://registry.yarnpkg.com/apollo-cache-inmemory/-/apollo-cache-inmemory-1.6.5.tgz#2ccaa3827686f6ed7fb634203dbf2b8d7015856a"
integrity sha512-koB76JUDJaycfejHmrXBbWIN9pRKM0Z9CJGQcBzIOtmte1JhEBSuzsOUu7NQgiXKYI4iGoMREcnaWffsosZynA==
dependencies:
apollo-cache "^1.3.4"
apollo-utilities "^1.3.3"
optimism "^0.10.0"
ts-invariant "^0.4.0"
tslib "^1.10.0"
apollo-cache@1.3.4, apollo-cache@^1.3.4:
version "1.3.4"
resolved "https://registry.yarnpkg.com/apollo-cache/-/apollo-cache-1.3.4.tgz#0c9f63c793e1cd6e34c450f7668e77aff58c9a42"
integrity sha512-7X5aGbqaOWYG+SSkCzJNHTz2ZKDcyRwtmvW4mGVLRqdQs+HxfXS4dUS2CcwrAj449se6tZ6NLUMnjko4KMt3KA==
dependencies:
apollo-utilities "^1.3.3"
tslib "^1.10.0"
apollo-client@^2.6.7:
version "2.6.8"
resolved "https://registry.yarnpkg.com/apollo-client/-/apollo-client-2.6.8.tgz#01cebc18692abf90c6b3806414e081696b0fa537"
integrity sha512-0zvJtAcONiozpa5z5zgou83iEKkBaXhhSSXJebFHRXs100SecDojyUWKjwTtBPn9HbM6o5xrvC5mo9VQ5fgAjw==
dependencies:
"@types/zen-observable" "^0.8.0"
apollo-cache "1.3.4"
apollo-link "^1.0.0"
apollo-utilities "1.3.3"
symbol-observable "^1.0.2"
ts-invariant "^0.4.0"
tslib "^1.10.0"
zen-observable "^0.8.0"
apollo-datasource@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/apollo-datasource/-/apollo-datasource-0.7.0.tgz#2a6d82edb2eba21b4ddf21877009ba39ff821945"
@ -3014,33 +2967,6 @@ apollo-graphql@^0.4.0:
apollo-env "^0.6.4"
lodash.sortby "^4.7.0"
apollo-link-error@^1.0.3:
version "1.1.13"
resolved "https://registry.yarnpkg.com/apollo-link-error/-/apollo-link-error-1.1.13.tgz#c1a1bb876ffe380802c8df0506a32c33aad284cd"
integrity sha512-jAZOOahJU6bwSqb2ZyskEK1XdgUY9nkmeclCrW7Gddh1uasHVqmoYc4CKdb0/H0Y1J9lvaXKle2Wsw/Zx1AyUg==
dependencies:
apollo-link "^1.2.14"
apollo-link-http-common "^0.2.16"
tslib "^1.9.3"
apollo-link-http-common@^0.2.16:
version "0.2.16"
resolved "https://registry.yarnpkg.com/apollo-link-http-common/-/apollo-link-http-common-0.2.16.tgz#756749dafc732792c8ca0923f9a40564b7c59ecc"
integrity sha512-2tIhOIrnaF4UbQHf7kjeQA/EmSorB7+HyJIIrUjJOKBgnXwuexi8aMecRlqTIDWcyVXCeqLhUnztMa6bOH/jTg==
dependencies:
apollo-link "^1.2.14"
ts-invariant "^0.4.0"
tslib "^1.9.3"
apollo-link-http@^1.3.1:
version "1.5.17"
resolved "https://registry.yarnpkg.com/apollo-link-http/-/apollo-link-http-1.5.17.tgz#499e9f1711bf694497f02c51af12d82de5d8d8ba"
integrity sha512-uWcqAotbwDEU/9+Dm9e1/clO7hTB2kQ/94JYcGouBVLjoKmTeJTUPQKcJGpPwUjZcSqgYicbFqQSoJIW0yrFvg==
dependencies:
apollo-link "^1.2.14"
apollo-link-http-common "^0.2.16"
tslib "^1.9.3"
apollo-link-persisted-queries@^0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/apollo-link-persisted-queries/-/apollo-link-persisted-queries-0.2.2.tgz#156597cb259b7bb56cf4e967a7be0312954f4591"
@ -3049,7 +2975,7 @@ apollo-link-persisted-queries@^0.2.2:
apollo-link "^1.2.1"
hash.js "^1.1.3"
apollo-link@^1.0.0, apollo-link@^1.0.6, apollo-link@^1.2.1, apollo-link@^1.2.14:
apollo-link@^1.2.1, apollo-link@^1.2.14:
version "1.2.14"
resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.14.tgz#3feda4b47f9ebba7f4160bef8b977ba725b684d9"
integrity sha512-p67CMEFP7kOG1JZ0ZkYZwRDa369w5PIjtMjvrQd/HnIV8FRsHRqLqK+oAZQnFa1DDdZtOtHTi+aMIW6EatC2jg==
@ -3171,7 +3097,7 @@ apollo-tracing@^0.9.1:
apollo-server-env "^2.4.3"
graphql-extensions "^0.11.1"
apollo-utilities@1.3.3, apollo-utilities@^1.0.1, apollo-utilities@^1.3.0, apollo-utilities@^1.3.3:
apollo-utilities@^1.0.1, apollo-utilities@^1.3.0:
version "1.3.3"
resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.3.3.tgz#f1854715a7be80cd810bc3ac95df085815c0787c"
integrity sha512-F14aX2R/fKNYMvhuP2t9GD9fggID7zp5I96MF5QeKYWDWTrkRdHRp4+SVfXUVN+cXOaB/IebfvRtzPf25CM0zw==
@ -6283,7 +6209,12 @@ graphql-subscriptions@^1.0.0:
dependencies:
iterall "^1.2.1"
graphql-tag@^2.4.2, graphql-tag@^2.9.2:
graphql-tag@^2.11.0:
version "2.11.0"
resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.11.0.tgz#1deb53a01c46a7eb401d6cb59dec86fa1cccbffd"
integrity sha512-VmsD5pJqWJnQZMUeRwrDhfgoyqcfwEkvtpANqcoUG8/tOLkwNgU9mzub/Mc78OJMhHjx7gfAMTxzdG43VGg3bA==
graphql-tag@^2.9.2:
version "2.10.3"
resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.10.3.tgz#ea1baba5eb8fc6339e4c4cf049dabe522b0edf03"
integrity sha512-4FOv3ZKfA4WdOKJeHdz6B3F/vxBLSgmBcGeAFPf4n1F64ltJUvOOerNj0rsJxONQGdhUMynQIvd6LzB+1J5oKA==
@ -6469,7 +6400,7 @@ hmac-drbg@^1.0.0:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"
hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.1:
hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@ -8815,12 +8746,12 @@ opn@^5.5.0:
dependencies:
is-wsl "^1.1.0"
optimism@^0.10.0:
version "0.10.3"
resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.10.3.tgz#163268fdc741dea2fb50f300bedda80356445fd7"
integrity sha512-9A5pqGoQk49H6Vhjb9kPgAeeECfUDF6aIICbMDL23kDLStBn1MWk3YvcZ4xWF9CsSf6XEgvRLkXy4xof/56vVw==
optimism@^0.12.1:
version "0.12.1"
resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.12.1.tgz#933f9467b9aef0e601655adb9638f893e486ad02"
integrity sha512-t8I7HM1dw0SECitBYAqFOVHoBAHEQBTeKjIL9y9ImHzAVkdyPK4ifTgM4VJRDtTUY4r/u5Eqxs4XcGPHaoPkeQ==
dependencies:
"@wry/context" "^0.4.0"
"@wry/context" "^0.5.2"
optimize-css-assets-webpack-plugin@5.0.3:
version "5.0.3"
@ -11654,7 +11585,7 @@ svgo@^1.0.0, svgo@^1.2.2:
unquote "~1.1.1"
util.promisify "~1.0.0"
symbol-observable@^1.0.2, symbol-observable@^1.0.4:
symbol-observable@^1.0.4, symbol-observable@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
@ -12734,7 +12665,7 @@ zen-observable-ts@^0.8.21:
tslib "^1.9.3"
zen-observable "^0.8.0"
zen-observable@^0.8.0:
zen-observable@^0.8.0, zen-observable@^0.8.14:
version "0.8.15"
resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==