Update NextJS examples and docuamentation for new App Directory #2760

EmrysMyrddin · 2023-05-11T19:30:54Z

Description

NextJS 13 introduced a new directory layout with the app folder. Some extra configuration is needed to make Yoga working compared to previous legacy pages directory layout.

This PR aims to update examples and integration documentation with this new layout.

fixes #2696

TODO:

Update documentation
Update example

changeset-bot · 2023-05-11T19:30:57Z

⚠️ No Changeset found

Latest commit: be054b6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2023-05-11T19:35:03Z

Apollo Federation Subgraph Compatibility Results

Federation 1 Support Federation 2 Support

`_service`	🟢
`@key (single)`	🟢
`@key (multi)`	🟢
`@key (composite)`	🟢
`repeatable @key`	🟢
`@requires`	🟢
`@provides`	🟢
`federated tracing`	🟢

`@link`	🟢
`@shareable`	🟢
`@tag`	🟢
`@override`	🟢
`@inaccessible`	🟢
`@composeDirective`	🟢
`@interfaceObject`	🟢

Learn more:

github-actions · 2023-05-11T19:35:31Z

🚀 Snapshot Release (`rc`)

The latest changes of this PR are available as rc on npm (based on the declared changesets):

Package	Version	Info
`graphql-yoga-cloud-run-guide`	`2.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/apollo-link`	`2.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/urql-exchange`	`2.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/redis-event-target`	`2.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/typed-event-target`	`2.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/graphiql`	`4.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`graphql-yoga`	`4.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/logger`	`1.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/nestjs`	`2.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/nestjs-federation`	`2.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/plugin-apollo-inline-trace`	`2.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/plugin-apq`	`2.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/plugin-csrf-prevention`	`2.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/plugin-defer-stream`	`2.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/plugin-disable-introspection`	`1.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/plugin-graphql-sse`	`2.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/plugin-persisted-operations`	`2.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/plugin-prometheus`	`2.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/plugin-response-cache`	`2.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/plugin-sofa`	`2.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/render-graphiql`	`4.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎
`@graphql-yoga/subscription`	`4.0.0-rc-20230526142752-be054b68`	npm ↗︎ unpkg ↗︎

github-actions · 2023-05-11T19:36:49Z

💻 Website Preview

The latest changes are available as preview in: https://5a81d196.graphql-yoga.pages.dev

github-actions · 2023-05-11T19:37:53Z

✅ Benchmark Results

     ✓ no_errors{mode:graphql}
     ✓ expected_result{mode:graphql}
     ✓ no_errors{mode:graphql-jit}
     ✓ expected_result{mode:graphql-jit}
     ✓ no_errors{mode:graphql-response-cache}
     ✓ expected_result{mode:graphql-response-cache}
     ✓ no_errors{mode:graphql-no-parse-validate-cache}
     ✓ expected_result{mode:graphql-no-parse-validate-cache}

     checks.......................................: 100.00% ✓ 356236      ✗ 0     
     data_received................................: 1.5 GB  12 MB/s
     data_sent....................................: 72 MB   599 kB/s
     http_req_blocked.............................: avg=1.38µs   min=800ns    med=1.2µs    max=756.7µs  p(90)=1.7µs    p(95)=2µs     
     http_req_connecting..........................: avg=4ns      min=0s       med=0s       max=455.29µs p(90)=0s       p(95)=0s      
     http_req_duration............................: avg=442.9µs  min=225.5µs  med=358.3µs  max=24.61ms  p(90)=640.5µs  p(95)=672.3µs 
       { expected_response:true }.................: avg=442.9µs  min=225.5µs  med=358.3µs  max=24.61ms  p(90)=640.5µs  p(95)=672.3µs 
     ✓ { mode:graphql-jit }.......................: avg=329.14µs min=225.5µs  med=288.3µs  max=24.61ms  p(90)=346.79µs p(95)=379.97µs
     ✓ { mode:graphql-no-parse-validate-cache }...: avg=692.27µs min=565.79µs med=637.29µs max=18.45ms  p(90)=715µs    p(95)=779.46µs
     ✓ { mode:graphql-response-cache }............: avg=382.84µs min=269.5µs  med=339.6µs  max=21.69ms  p(90)=395.5µs  p(95)=431.26µs
     ✓ { mode:graphql }...........................: avg=463.66µs min=335.3µs  med=398.1µs  max=21.4ms   p(90)=479.04µs p(95)=544.6µs 
     http_req_failed..............................: 0.00%   ✓ 0           ✗ 178118
     http_req_receiving...........................: avg=24.79µs  min=14.2µs   med=20.9µs   max=9.06ms   p(90)=32µs     p(95)=36.6µs  
     http_req_sending.............................: avg=10.48µs  min=5.2µs    med=6.4µs    max=7.46ms   p(90)=10.8µs   p(95)=12.9µs  
     http_req_tls_handshaking.....................: avg=0s       min=0s       med=0s       max=0s       p(90)=0s       p(95)=0s      
     http_req_waiting.............................: avg=407.62µs min=202.6µs  med=326.5µs  max=24.56ms  p(90)=612.29µs p(95)=639.4µs 
     http_reqs....................................: 178118  1484.289949/s
     iteration_duration...........................: avg=668.78µs min=411.4µs  med=581µs    max=24.85ms  p(90)=853.4µs  p(95)=905µs   
     iterations...................................: 178118  1484.289949/s
     vus..........................................: 1       min=1         max=1   
     vus_max......................................: 2       min=2         max=2

n1ru4l · 2023-05-26T08:00:00Z

examples/nextjs-app/package-lock.json

Why do we need an npm lockfile?

I don't think it is needed, it was probably added by the next project scaffolder.

github-actions · 2023-05-26T08:11:16Z

diff --git a/website/route-lockfile.txt b/website/route-lockfile.txt
index d1792dc2..a4172aa0 100644
--- a/website/route-lockfile.txt
+++ b/website/route-lockfile.txt
@@ -5,9 +5,7 @@
 /docs/features/apollo-federation
 /docs/features/automatic-persisted-queries
 /docs/features/context
-/docs/features/cookies
 /docs/features/cors
-/docs/features/csrf-prevention
 /docs/features/defer-stream
 /docs/features/envelop-plugins
 /docs/features/error-masking
@@ -38,7 +36,6 @@
 /docs/integrations/integration-with-nestjs
 /docs/integrations/integration-with-nextjs
 /docs/integrations/integration-with-sveltekit
-/docs/integrations/integration-with-uwebsockets
 /docs/integrations/z-other-environments
 /docs/migration/migration-from-apollo-server
 /docs/migration/migration-from-express-graphql

Co-authored-by: Laurin Quast <laurinquast@googlemail.com>

EmrysMyrddin mentioned this pull request May 11, 2023

Update NextJS examples and docuamentation for new App Directory #2746

Closed

3 tasks

EmrysMyrddin force-pushed the doc/2696-next-js-13-integration branch 2 times, most recently from 58ad871 to d576a4b Compare May 12, 2023 13:36

EmrysMyrddin force-pushed the doc/2696-next-js-13-integration branch from 02e993c to c591df8 Compare May 19, 2023 21:49

EmrysMyrddin mentioned this pull request May 19, 2023

Add e2e test for Next 13 #2773

Merged

EmrysMyrddin force-pushed the doc/2696-next-js-13-integration branch from 4b636cf to e72117b Compare May 21, 2023 13:56

EmrysMyrddin requested a review from ardatan May 22, 2023 11:29

EmrysMyrddin force-pushed the doc/2696-next-js-13-integration branch from e72117b to f5fc922 Compare May 22, 2023 11:44

ardatan approved these changes May 22, 2023

View reviewed changes

EmrysMyrddin force-pushed the doc/2696-next-js-13-integration branch from f5fc922 to ae415ad Compare May 26, 2023 07:57

n1ru4l reviewed May 26, 2023

View reviewed changes

EmrysMyrddin force-pushed the doc/2696-next-js-13-integration branch from ae415ad to 99deff5 Compare May 26, 2023 08:02

EmrysMyrddin force-pushed the doc/2696-next-js-13-integration branch from 28a903c to c26c617 Compare May 26, 2023 13:31

ardatan force-pushed the doc/2696-next-js-13-integration branch from c26c617 to 6b3c9da Compare May 26, 2023 13:34

EmrysMyrddin and others added 8 commits May 26, 2023 16:34

move legacy next example

802e5bb

add example for NextJS 13 new app directory

632258f

update next integration documentation

4e55f61

update Next specific wording to match Next's doc

e098b55

Update examples/nextjs-legacy-pages/package.json

26a531e

Co-authored-by: Laurin Quast <laurinquast@googlemail.com>

fix documentation to pass production build

af27411

fix versel e2e tests

3fd5049

Update

af52c48

ardatan force-pushed the doc/2696-next-js-13-integration branch from 6b3c9da to af52c48 Compare May 26, 2023 13:35

EmrysMyrddin force-pushed the doc/2696-next-js-13-integration branch from f3fc81d to c26c617 Compare May 26, 2023 13:41

EmrysMyrddin force-pushed the doc/2696-next-js-13-integration branch from c26c617 to af52c48 Compare May 26, 2023 13:43

EmrysMyrddin added 3 commits May 26, 2023 15:47

fix documentation for nextjs

f4d0e85

fix nextjs example

3b5af1c

remove unecessary Request param

be054b6

ardatan merged commit 465c50b into main May 26, 2023

ardatan deleted the doc/2696-next-js-13-integration branch May 26, 2023 14:42

mmachatschek mentioned this pull request Sep 26, 2023

Add example for Next 13 app directory and Keystone getContext keystonejs/keystone#8371

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update NextJS examples and docuamentation for new App Directory #2760

Update NextJS examples and docuamentation for new App Directory #2760

EmrysMyrddin commented May 11, 2023 •

edited

Loading

changeset-bot bot commented May 11, 2023 •

edited

Loading

github-actions bot commented May 11, 2023 •

edited

Loading

github-actions bot commented May 11, 2023 •

edited

Loading

github-actions bot commented May 11, 2023 •

edited

Loading

github-actions bot commented May 11, 2023 •

edited

Loading

n1ru4l May 26, 2023

EmrysMyrddin May 26, 2023

github-actions bot commented May 26, 2023

Update NextJS examples and docuamentation for new App Directory #2760

Update NextJS examples and docuamentation for new App Directory #2760

Conversation

EmrysMyrddin commented May 11, 2023 • edited Loading

Description

TODO:

changeset-bot bot commented May 11, 2023 • edited Loading

⚠️ No Changeset found

github-actions bot commented May 11, 2023 • edited Loading

Apollo Federation Subgraph Compatibility Results

github-actions bot commented May 11, 2023 • edited Loading

🚀 Snapshot Release (rc)

github-actions bot commented May 11, 2023 • edited Loading

💻 Website Preview

github-actions bot commented May 11, 2023 • edited Loading

✅ Benchmark Results

n1ru4l May 26, 2023

Choose a reason for hiding this comment

EmrysMyrddin May 26, 2023

Choose a reason for hiding this comment

github-actions bot commented May 26, 2023

EmrysMyrddin commented May 11, 2023 •

edited

Loading

changeset-bot bot commented May 11, 2023 •

edited

Loading

github-actions bot commented May 11, 2023 •

edited

Loading

github-actions bot commented May 11, 2023 •

edited

Loading

🚀 Snapshot Release (`rc`)

github-actions bot commented May 11, 2023 •

edited

Loading

github-actions bot commented May 11, 2023 •

edited

Loading