graphql-code-generator icon indicating copy to clipboard operation
graphql-code-generator copied to clipboard

feat(examples): add nextjs app router example

Open wolffparkinson opened this issue 2 years ago • 2 comments

Description

An example of setting up graphql-code-generator with NextJS 13 server components with client-preset plugin.

  • Motivation : An end-to-end type-safe API provides a very good DX. (tRPC).

  • Setting up a GraphQL API with NextJS 13 app router with support for RSC, client components and suspense is crucial, but at the same time cumbersome, simply because tons of tools, plugins and presets.

  • This example showcases the minimal configuration required to setup the same.

Related #9654

Type of change

  • [x] New feature (non-breaking change which adds functionality)

How Has This Been Tested?

  • [x] Cypress e2e testing. It covers all the use-cases: RSC, useQuery, useSuspenseQuery

Test Environment:

  • OS: Windows 11
"dependencies": {
    "@apollo/client": "^3.8.1",
    "@apollo/experimental-nextjs-app-support": "^0.4.1",
    "@graphql-typed-document-node/core": "^3.2.0",
    "autoprefixer": "10.4.15",
    "graphql": "^16.8.0",
    "next": "13.4.19",
    "postcss": "8.4.29",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^5.0.0",
    "@graphql-codegen/client-preset": "^4.1.0",
    "@parcel/watcher": "^2.3.0",
    "@types/node": "20.5.7",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "cypress": "^13.0.0",
    "eslint": "^8.48.0",
    "typescript": "5.2.2"
  }
  • NodeJS: v18.16.0

Checklist:

  • [x] I have followed the CONTRIBUTING doc and the style guidelines of this project
  • [x] I have performed a self-review of my own code
  • [x] I have commented my code, particularly in hard-to-understand areas
  • [ ] I have made corresponding changes to the documentation
  • [x] My changes generate no new warnings
  • [x] I have added tests that prove my fix is effective or that my feature works
  • [ ] New and existing unit tests pass locally with my changes
  • [ ] Any dependent changes have been merged and published in downstream modules

Further comments

If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc...

wolffparkinson avatar Aug 30 '23 18:08 wolffparkinson

⚠️ No Changeset found

Latest commit: bcbf457b494b7fbae15311cae8dbe852a603544e

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

changeset-bot[bot] avatar Aug 30 '23 18:08 changeset-bot[bot]

⚠️ No Changeset found

Latest commit: 4c288061f8a1c35d4539e90192da67e89a677516

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

changeset-bot[bot] avatar Aug 30 '23 18:08 changeset-bot[bot]