From bb1bdbb10fb7f8b4f5d6b05c5e63ba589151cb50 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Wed, 2 Dec 2020 06:55:43 -0600 Subject: [PATCH 1/4] Update @ampproject/toolbox-optimizer to latest version (#19722) This updates to the latest version of the `@ampproject/toolbox-optimizer` which contains updates for dependencies to remove the warnings on install from `npm` x-ref: https://github.com/vercel/next.js/pull/18994 Closes: https://github.com/vercel/next.js/issues/17416 --- packages/next/package.json | 2 +- yarn.lock | 153 ++++++++++++++++++------------------- 2 files changed, 74 insertions(+), 81 deletions(-) diff --git a/packages/next/package.json b/packages/next/package.json index 40747950224f5..e4a794a7e610f 100644 --- a/packages/next/package.json +++ b/packages/next/package.json @@ -60,7 +60,7 @@ ] }, "dependencies": { - "@ampproject/toolbox-optimizer": "2.7.0-alpha.1", + "@ampproject/toolbox-optimizer": "2.7.1-alpha.0", "@babel/runtime": "7.12.5", "@hapi/accept": "5.0.1", "@next/env": "10.0.4-canary.1", diff --git a/yarn.lock b/yarn.lock index 30cf1378d2da8..fb09cad7ec295 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,56 +2,56 @@ # yarn lockfile v1 -"@ampproject/toolbox-core@^2.6.0": - version "2.6.0" - resolved "https://registry.yarnpkg.com/@ampproject/toolbox-core/-/toolbox-core-2.6.0.tgz#9824d5f133d82106a9bf0774920843c69fa5c869" - integrity sha512-sDMnHj8WaX3tqJS5VsIHkeW98nq5WQ0C9RoFc1PPS3rmYIlS0vhAfHbrjJw6wtuxBTQFxccje+Ew+2OJ2D15kA== +"@ampproject/toolbox-core@^2.7.1-alpha.0": + version "2.7.1-alpha.0" + resolved "https://registry.yarnpkg.com/@ampproject/toolbox-core/-/toolbox-core-2.7.1-alpha.0.tgz#6ac10a832ecbb2b8151bbad964f29770d91560d6" + integrity sha512-Vutu9Bzo43Hp6Oxem2f14+d1WT107TJiVgpMGdyhdOfd7s+K/D7iI2EKuEsqLRGfJ/NWyXhv8xkQnGZXjIIXjQ== dependencies: - cross-fetch "3.0.5" + cross-fetch "3.0.6" lru-cache "6.0.0" -"@ampproject/toolbox-optimizer@2.7.0-alpha.1": - version "2.7.0-alpha.1" - resolved "https://registry.yarnpkg.com/@ampproject/toolbox-optimizer/-/toolbox-optimizer-2.7.0-alpha.1.tgz#ab4c386645f991e5da5a9d2967ed2bb734a9f6c4" - integrity sha512-2wTvOyM6GP6FrYQzxSQCg43STo1jMRGeDKa6YUkYXYH9fm9Wbt2wTRx+ajjb48JQ6WwUnGwga1MhQhVFzRQ+wQ== +"@ampproject/toolbox-optimizer@2.7.1-alpha.0": + version "2.7.1-alpha.0" + resolved "https://registry.yarnpkg.com/@ampproject/toolbox-optimizer/-/toolbox-optimizer-2.7.1-alpha.0.tgz#1571dcd02608223ff68f6b7223102a123e381197" + integrity sha512-WGPZKVQvHgNYJk1XVJCCmY+NVGTGJtvn0OALDyiegN4FJWOcilQUhCIcjMkZN59u1flz/u+sEKccM5qsROqVyg== dependencies: - "@ampproject/toolbox-core" "^2.6.0" - "@ampproject/toolbox-runtime-version" "^2.7.0-alpha.1" + "@ampproject/toolbox-core" "^2.7.1-alpha.0" + "@ampproject/toolbox-runtime-version" "^2.7.1-alpha.0" "@ampproject/toolbox-script-csp" "^2.5.4" - "@ampproject/toolbox-validator-rules" "^2.5.4" + "@ampproject/toolbox-validator-rules" "^2.7.1-alpha.0" abort-controller "3.0.0" - cross-fetch "3.0.5" - cssnano-simple "1.2.0" - dom-serializer "1.0.1" - domhandler "3.0.0" - domutils "2.1.0" - htmlparser2 "4.1.0" + cross-fetch "3.0.6" + cssnano-simple "1.2.1" + dom-serializer "1.1.0" + domhandler "3.3.0" + domutils "2.4.2" + htmlparser2 "5.0.1" https-proxy-agent "5.0.0" lru-cache "6.0.0" - node-fetch "2.6.0" + node-fetch "2.6.1" normalize-html-whitespace "1.0.0" postcss "7.0.32" postcss-safe-parser "4.0.2" - terser "5.1.0" + terser "5.5.1" -"@ampproject/toolbox-runtime-version@^2.7.0-alpha.1": - version "2.7.0-alpha.1" - resolved "https://registry.yarnpkg.com/@ampproject/toolbox-runtime-version/-/toolbox-runtime-version-2.7.0-alpha.1.tgz#2ecd603e1fc986f21048947639e99b5706e01ec3" - integrity sha512-JruvO4RfaC/piKOY/2w6vuasNjdrHnb+xvmQTl4zBBdMsDooohZKsN9jv9YiKIdpny4MzLt1ce497840vJJq+g== +"@ampproject/toolbox-runtime-version@^2.7.1-alpha.0": + version "2.7.1-alpha.0" + resolved "https://registry.yarnpkg.com/@ampproject/toolbox-runtime-version/-/toolbox-runtime-version-2.7.1-alpha.0.tgz#1b1fac873811696294011f9ff798fd405de8ffc3" + integrity sha512-CB3JicgGp/Hp5Tey5/S1hgR+E5kNhS9V2GUeMW7qDYDqaJ6dLNlQ5tYgqaebrpeRxufZrK5MRd7bnM4o5tAyuA== dependencies: - "@ampproject/toolbox-core" "^2.6.0" + "@ampproject/toolbox-core" "^2.7.1-alpha.0" "@ampproject/toolbox-script-csp@^2.5.4": version "2.5.4" resolved "https://registry.yarnpkg.com/@ampproject/toolbox-script-csp/-/toolbox-script-csp-2.5.4.tgz#d8b7b91a678ae8f263cb36d9b74e441b7d633aad" integrity sha512-+knTYetI5nWllRZ9wFcj7mYxelkiiFVRAAW/hl0ad8EnKHMH82tRlk40CapEnUHhp6Er5sCYkumQ8dngs3Q4zQ== -"@ampproject/toolbox-validator-rules@^2.5.4": - version "2.5.4" - resolved "https://registry.yarnpkg.com/@ampproject/toolbox-validator-rules/-/toolbox-validator-rules-2.5.4.tgz#7dee3a3edceefea459d060571db8cc6e7bbf0dd6" - integrity sha512-bS7uF+h0s5aiklc/iRaujiSsiladOsZBLrJ6QImJDXvubCAQtvE7om7ShlGSXixkMAO0OVMDWyuwLlEy8V1Ing== +"@ampproject/toolbox-validator-rules@^2.7.1-alpha.0": + version "2.7.1-alpha.0" + resolved "https://registry.yarnpkg.com/@ampproject/toolbox-validator-rules/-/toolbox-validator-rules-2.7.1-alpha.0.tgz#ff00958bc2015d9d4697143da606e34fc773577a" + integrity sha512-1+nrZDkHIk8Go4Qh9DUfjTrbsW0OTvLYdwcI716LdgyB3WsmLfsAx/fJU/9Tc14a1YS73ptx2Xb0Tdh+ewwEIw== dependencies: - cross-fetch "3.0.5" + cross-fetch "^3.0.6" "@babel/code-frame@7.10.4", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4": version "7.10.4" @@ -5376,12 +5376,12 @@ cross-env@6.0.3: dependencies: cross-spawn "^7.0.0" -cross-fetch@3.0.5: - version "3.0.5" - resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.5.tgz#2739d2981892e7ab488a7ad03b92df2816e03f4c" - integrity sha512-FFLcLtraisj5eteosnX1gf01qYDCOc4fDy0+euOt8Kn9YBY2NtXL/pCoYPavw24NIQkQqm5ZOLsGD5Zzj0gyew== +cross-fetch@3.0.6, cross-fetch@^3.0.6: + version "3.0.6" + resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.6.tgz#3a4040bc8941e653e0e9cf17f29ebcd177d3365c" + integrity sha512-KBPUbqgFjzWlVcURG+Svp9TlhA5uliYtiNx/0r8nv0pdypeQCRJ9IaSIc3q/x3q8t3F75cHuwxVql1HFGHCNJQ== dependencies: - node-fetch "2.6.0" + node-fetch "2.6.1" cross-spawn-async@^2.1.1: version "2.2.5" @@ -5664,14 +5664,6 @@ cssnano-preset-default@^4.0.7: postcss-svgo "^4.0.2" postcss-unique-selectors "^4.0.1" -cssnano-preset-simple@1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/cssnano-preset-simple/-/cssnano-preset-simple-1.2.0.tgz#afcf13eb076e8ebd91c4f311cd449781c14c7371" - integrity sha512-zojGlY+KasFeQT/SnD/WqYXHcKddz2XHRDtIwxrWpGqGHp5IyLWsWFS3UW7pOf3AWvfkpYSRdxOSlYuJPz8j8g== - dependencies: - caniuse-lite "^1.0.30001093" - postcss "^7.0.32" - cssnano-preset-simple@1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/cssnano-preset-simple/-/cssnano-preset-simple-1.2.1.tgz#8976013114b1fc4718253d30f21aaed1780fb80e" @@ -5680,14 +5672,6 @@ cssnano-preset-simple@1.2.1: caniuse-lite "^1.0.30001093" postcss "^7.0.32" -cssnano-simple@1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/cssnano-simple/-/cssnano-simple-1.2.0.tgz#b8cc5f52c2a52e6513b4636d0da165ec9d48d327" - integrity sha512-pton9cZ70/wOCWMAbEGHO1ACsW1KggTB6Ikj7k71uOEsz6SfByH++86+WAmXjRSc9q/g9gxkpFP9bDX9vRotdA== - dependencies: - cssnano-preset-simple "1.2.0" - postcss "^7.0.32" - cssnano-simple@1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/cssnano-simple/-/cssnano-simple-1.2.1.tgz#6de5d9dd75774bc8f31767573410a952c7dd8a12" @@ -6115,17 +6099,17 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" -dom-serializer@0, dom-serializer@^0.2.1: +dom-serializer@0: version "0.2.2" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51" dependencies: domelementtype "^2.0.1" entities "^2.0.0" -dom-serializer@1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.0.1.tgz#79695eb49af3cd8abc8d93a73da382deb1ca0795" - integrity sha512-1Aj1Qy3YLbdslkI75QEOfdp9TkQ3o8LRISAzxOibjBs/xWwr1WxZFOQphFkZuepHFGo+kB8e5FVJSS0faAJ4Rw== +dom-serializer@1.1.0, dom-serializer@^1.0.1: + version "1.1.0" + resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.1.0.tgz#5f7c828f1bfc44887dc2a315ab5c45691d544b58" + integrity sha512-ox7bvGXt2n+uLWtCRLybYx60IrOlWL/aCebWJk1T0d4m3y2tzf4U3ij9wBMUb6YJZpz06HCCYuyCDveE2xXmzQ== dependencies: domelementtype "^2.0.1" domhandler "^3.0.0" @@ -6167,9 +6151,10 @@ domexception@^2.0.1: dependencies: webidl-conversions "^5.0.0" -domhandler@3.0.0, domhandler@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-3.0.0.tgz#51cd13efca31da95bbb0c5bee3a48300e333b3e9" +domhandler@3.3.0, domhandler@^3.3.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-3.3.0.tgz#6db7ea46e4617eb15cf875df68b2b8524ce0037a" + integrity sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA== dependencies: domelementtype "^2.0.1" @@ -6179,6 +6164,12 @@ domhandler@^2.3.0: dependencies: domelementtype "1" +domhandler@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-3.0.0.tgz#51cd13efca31da95bbb0c5bee3a48300e333b3e9" + dependencies: + domelementtype "^2.0.1" + domutils@1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf" @@ -6186,14 +6177,14 @@ domutils@1.5.1: dom-serializer "0" domelementtype "1" -domutils@2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.1.0.tgz#7ade3201af43703fde154952e3a868eb4b635f16" - integrity sha512-CD9M0Dm1iaHfQ1R/TI+z3/JWp/pgub0j4jIQKH89ARR4ATAV2nbaOQS5XxU9maJP5jHaPdDDQSEHuE2UmpUTKg== +domutils@2.4.2, domutils@^2.4.2: + version "2.4.2" + resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.4.2.tgz#7ee5be261944e1ad487d9aa0616720010123922b" + integrity sha512-NKbgaM8ZJOecTZsIzW5gSuplsX2IWW2mIK7xVr8hTQF2v1CJWTmLZ1HOCh5sH+IzVPAGE5IucooOkvwBRAdowA== dependencies: - dom-serializer "^0.2.1" + dom-serializer "^1.0.1" domelementtype "^2.0.1" - domhandler "^3.0.0" + domhandler "^3.3.0" domutils@^1.5.1, domutils@^1.7.0: version "1.7.0" @@ -6202,14 +6193,6 @@ domutils@^1.5.1, domutils@^1.7.0: dom-serializer "0" domelementtype "1" -domutils@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.0.0.tgz#15b8278e37bfa8468d157478c58c367718133c08" - dependencies: - dom-serializer "^0.2.1" - domelementtype "^2.0.1" - domhandler "^3.0.0" - dot-case@^2.1.0: version "2.1.1" resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-2.1.1.tgz#34dcf37f50a8e93c2b3bca8bb7fb9155c7da3bee" @@ -8001,13 +7984,14 @@ html-encoding-sniffer@^2.0.1: dependencies: whatwg-encoding "^1.0.5" -htmlparser2@4.1.0: - version "4.1.0" - resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-4.1.0.tgz#9a4ef161f2e4625ebf7dfbe6c0a2f52d18a59e78" +htmlparser2@5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-5.0.1.tgz#7daa6fc3e35d6107ac95a4fc08781f091664f6e7" + integrity sha512-vKZZra6CSe9qsJzh0BjBGXo8dvzNsq/oGvsjfRdOrrryfeD9UOBEEQdeoqCRmKZchF5h2zOBMQ6YuQ0uRUmdbQ== dependencies: domelementtype "^2.0.1" - domhandler "^3.0.0" - domutils "^2.0.0" + domhandler "^3.3.0" + domutils "^2.4.2" entities "^2.0.0" htmlparser2@^3.9.1: @@ -14968,7 +14952,7 @@ source-map-resolve@^0.6.0: atob "^2.1.2" decode-uri-component "^0.2.0" -source-map-support@^0.5.16: +source-map-support@^0.5.16, source-map-support@~0.5.19: version "0.5.19" resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61" integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw== @@ -14991,7 +14975,7 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" -source-map@0.7.3: +source-map@0.7.3, source-map@~0.7.2: version "0.7.3" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383" @@ -15719,6 +15703,15 @@ terser@5.1.0, terser@^5.0.0: source-map "~0.6.1" source-map-support "~0.5.12" +terser@5.5.1: + version "5.5.1" + resolved "https://registry.yarnpkg.com/terser/-/terser-5.5.1.tgz#540caa25139d6f496fdea056e414284886fb2289" + integrity sha512-6VGWZNVP2KTUcltUQJ25TtNjx/XgdDsBDKGt8nN0MpydU36LmbPPcMBd2kmtZNNGVVDLg44k7GKeHHj+4zPIBQ== + dependencies: + commander "^2.20.0" + source-map "~0.7.2" + source-map-support "~0.5.19" + terser@^3.8.2: version "3.17.0" resolved "https://registry.yarnpkg.com/terser/-/terser-3.17.0.tgz#f88ffbeda0deb5637f9d24b0da66f4e15ab10cb2" From 8c2cb4640a4279b13416a38846786526874d6bea Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Wed, 2 Dec 2020 10:23:42 -0600 Subject: [PATCH 2/4] Clarify data fetching documentation on calling API routes. (#19748) We've received some feedback that the current note about calling API routes inside gSP/gSSP is confusing. This updates the wording to make it clear you can still use `fetch` in your application, and also to not say you "import" an API route. You import the _logic_ inside the route. --- docs/basic-features/data-fetching.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/basic-features/data-fetching.md b/docs/basic-features/data-fetching.md index b3402cb23e149..0a7c05aa96ce2 100644 --- a/docs/basic-features/data-fetching.md +++ b/docs/basic-features/data-fetching.md @@ -114,8 +114,8 @@ The `context` parameter is an object containing the following keys: > This includes reading from the filesystem or a database. > **Note**: You should not use [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to -> call an API route in your application. -> Instead, directly import the API route and call its function yourself. +> call an API route in `getStaticProps`. +> Instead, directly import the logic used inside your API route. > You may need to slightly refactor your code for this approach. > > Fetching from an external API is fine! @@ -661,8 +661,8 @@ The `context` parameter is an object containing the following keys: > This includes reading from the filesystem or a database. > **Note**: You should not use [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to -> call an API route in your application. -> Instead, directly import the API route and call its function yourself. +> call an API route in `getServerSideProps`. +> Instead, directly import the logic used inside your API route. > You may need to slightly refactor your code for this approach. > > Fetching from an external API is fine! From 3924b0047865f7a1c11694e5940d2491252d1003 Mon Sep 17 00:00:00 2001 From: Michael McQuade Date: Wed, 2 Dec 2020 12:09:54 -0600 Subject: [PATCH 3/4] docs/Remove extra word (#19754) Remove extra word "the" --- docs/deployment.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/deployment.md b/docs/deployment.md index fc1a806e9ccf8..b6464f4e46fbf 100644 --- a/docs/deployment.md +++ b/docs/deployment.md @@ -40,7 +40,7 @@ By using the DPS workflow, in addition to doing _code reviews_, you can do _depl For example, the [hybrid pages](/docs/basic-features/pages.md) approach is fully supported out of the box. - Every page can either use [Static Generation](/docs/basic-features/pages.md#static-generation) or [Server-Side Rendering](/docs/basic-features/pages.md#server-side-rendering). -- Pages that use [Static Generation](/docs/basic-features/pages.md#static-generation) and assets (JS, CSS, images, fonts, etc) will automatically be served from the [Vercel's Edge Network](https://vercel.com/docs/v2/edge-network/overview), which is blazingly fast. +- Pages that use [Static Generation](/docs/basic-features/pages.md#static-generation) and assets (JS, CSS, images, fonts, etc) will automatically be served from [Vercel's Edge Network](https://vercel.com/docs/v2/edge-network/overview), which is blazingly fast. - Pages that use [Server-Side Rendering](/docs/basic-features/pages.md#server-side-rendering) and [API routes](/docs/api-routes/introduction.md) will automatically become isolated Serverless Functions. This allows page rendering and API requests to scale infinitely. ### Custom Domains, Environment Variables, Automatic HTTPS, and more From 20949612dfb56e44a623498eb3237a69177229e5 Mon Sep 17 00:00:00 2001 From: Carmelo Scandaliato <8927157+cascandaliato@users.noreply.github.com> Date: Wed, 2 Dec 2020 20:45:31 +0100 Subject: [PATCH 4/4] Replace Graphcool with a working GraphQL endpoint in with-apollo-and-redux example (#19248) The example stopped working when the GraphQL service [Graphcool](https://www.graph.cool/) shut down in July. I have replaced it with an [Hasura](https://hasura.io/) endpoint. Fixes #19093 --- examples/with-apollo-and-redux/README.md | 2 ++ .../components/PostList.js | 2 +- .../components/PostUpvoter.js | 11 ++++---- .../components/Submit.js | 28 ++++++++++--------- examples/with-apollo-and-redux/lib/apollo.js | 13 +++++++-- examples/with-apollo-and-redux/package.json | 1 + 6 files changed, 35 insertions(+), 22 deletions(-) diff --git a/examples/with-apollo-and-redux/README.md b/examples/with-apollo-and-redux/README.md index 622fd8c1528d8..267ec45b04a83 100644 --- a/examples/with-apollo-and-redux/README.md +++ b/examples/with-apollo-and-redux/README.md @@ -4,6 +4,8 @@ This example serves as a conduit if you were using Apollo 1.X with Redux, and ar In 3.0.0, Apollo serves out-of-the-box support for redux in favor of Apollo's state management. This example aims to be an amalgamation of the [`with-apollo`](https://github.com/vercel/next.js/tree/master/examples/with-apollo) and [`with-redux`](https://github.com/vercel/next.js/tree/master/examples/with-redux) examples. +To inspect the GraphQL API, use its [web IDE](https://nextjs-graphql-with-prisma-simple.vercel.app/api). + ## Deploy your own Deploy the example using [Vercel](https://vercel.com): diff --git a/examples/with-apollo-and-redux/components/PostList.js b/examples/with-apollo-and-redux/components/PostList.js index a2a264488f01e..d9b01d3ef1e6a 100644 --- a/examples/with-apollo-and-redux/components/PostList.js +++ b/examples/with-apollo-and-redux/components/PostList.js @@ -4,7 +4,7 @@ import PostUpvoter from './PostUpvoter' export const ALL_POSTS_QUERY = gql` query allPosts($first: Int!, $skip: Int!) { - allPosts(orderBy: createdAt_DESC, first: $first, skip: $skip) { + allPosts(orderBy: { createdAt: desc }, first: $first, skip: $skip) { id title votes diff --git a/examples/with-apollo-and-redux/components/PostUpvoter.js b/examples/with-apollo-and-redux/components/PostUpvoter.js index 122ad86bfe2a5..a34d697113798 100644 --- a/examples/with-apollo-and-redux/components/PostUpvoter.js +++ b/examples/with-apollo-and-redux/components/PostUpvoter.js @@ -1,9 +1,9 @@ import { gql, useMutation } from '@apollo/client' import PropTypes from 'prop-types' -const UPDATE_POST_MUTATION = gql` - mutation updatePost($id: ID!, $votes: Int) { - updatePost(id: $id, votes: $votes) { +const VOTE_POST = gql` + mutation votePost($id: String!) { + votePost(id: $id) { __typename id votes @@ -12,13 +12,12 @@ const UPDATE_POST_MUTATION = gql` ` const PostUpvoter = ({ votes, id }) => { - const [updatePost] = useMutation(UPDATE_POST_MUTATION) + const [votePost] = useMutation(VOTE_POST) const upvotePost = () => { - updatePost({ + votePost({ variables: { id, - votes: votes + 1, }, optimisticResponse: { __typename: 'Mutation', diff --git a/examples/with-apollo-and-redux/components/Submit.js b/examples/with-apollo-and-redux/components/Submit.js index f3a44607f1d37..5b0cd4b17b2b3 100644 --- a/examples/with-apollo-and-redux/components/Submit.js +++ b/examples/with-apollo-and-redux/components/Submit.js @@ -1,5 +1,4 @@ import { gql, useMutation } from '@apollo/client' -import { ALL_POSTS_QUERY, allPostsQueryVars } from './PostList' const CREATE_POST_MUTATION = gql` mutation createPost($title: String!, $url: String!) { @@ -26,19 +25,22 @@ const Submit = () => { createPost({ variables: { title, url }, - update: (proxy, { data: { createPost } }) => { - const data = proxy.readQuery({ - query: ALL_POSTS_QUERY, - variables: allPostsQueryVars, - }) - // Update the cache with the new post at the top of the - proxy.writeQuery({ - query: ALL_POSTS_QUERY, - data: { - ...data, - allPosts: [createPost, ...data.allPosts], + update: (cache, { data: { createPost } }) => { + cache.modify({ + fields: { + allPosts(existingPosts = []) { + const newPostRef = cache.writeFragment({ + data: createPost, + fragment: gql` + fragment NewPost on allPosts { + id + type + } + `, + }) + return [newPostRef, ...existingPosts] + }, }, - variables: allPostsQueryVars, }) }, }) diff --git a/examples/with-apollo-and-redux/lib/apollo.js b/examples/with-apollo-and-redux/lib/apollo.js index 7c66dc9bb8655..b91ca34b1c7df 100644 --- a/examples/with-apollo-and-redux/lib/apollo.js +++ b/examples/with-apollo-and-redux/lib/apollo.js @@ -2,6 +2,7 @@ import { useMemo } from 'react' import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client' import { concatPagination } from '@apollo/client/utilities' import merge from 'deepmerge' +import isEqual from 'lodash/isEqual' let apolloClient @@ -9,7 +10,7 @@ function createApolloClient() { return new ApolloClient({ ssrMode: typeof window === 'undefined', link: new HttpLink({ - uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn', // Server URL (must be absolute) + uri: 'https://nextjs-graphql-with-prisma-simple.vercel.app/api', // Server URL (must be absolute) credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers` }), cache: new InMemoryCache({ @@ -34,7 +35,15 @@ export function initializeApollo(initialState = null) { const existingCache = _apolloClient.extract() // Merge the existing cache into data passed from getStaticProps/getServerSideProps - const data = merge(initialState, existingCache) + const data = merge(initialState, existingCache, { + // combine arrays using object equality (like in sets) + arrayMerge: (destinationArray, sourceArray) => [ + ...sourceArray, + ...destinationArray.filter((d) => + sourceArray.every((s) => !isEqual(d, s)) + ), + ], + }) // Restore the cache with the merged data _apolloClient.cache.restore(data) diff --git a/examples/with-apollo-and-redux/package.json b/examples/with-apollo-and-redux/package.json index 79f629c1c5892..8e557367eae84 100644 --- a/examples/with-apollo-and-redux/package.json +++ b/examples/with-apollo-and-redux/package.json @@ -10,6 +10,7 @@ "@apollo/client": "^3.0.0", "deepmerge": "^4.2.2", "graphql": "14.5.8", + "lodash": "4.17.20", "next": "latest", "prop-types": "^15.6.0", "react": "^16.11.0",