archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
rsnext/examples/with-typescript-graphql
History
Henrik Wenz 92aafcbcf1
[Docs] Add config types to all examples (#40083) 
<!--
Thanks for opening a PR! Your contribution is much appreciated.
In order to make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->

## Summary

- Added jsdoc typing for all examples using `next.config.js`
- Added jsdoc typing for all examples using `tailwind.config.js`

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
2022-08-31 16:41:22 -05:00
..
lib refactor(examples/with-typescript-graphql): use codegen TypedDocumentNode and GraphQL Yoga for better DX and smaller bundle size (#36240) 2022-05-23 16:58:27 +00:00
pages refactor(examples/with-typescript-graphql): use codegen TypedDocumentNode and GraphQL Yoga for better DX and smaller bundle size (#36240) 2022-05-23 16:58:27 +00:00
test Add mutation example to with-typescript-graphql (#16742) 2020-11-10 21:10:54 +00:00
.gitignore Update default gitignore templates (#39051) 2022-07-26 20:08:40 -05:00
codegen.yml refactor(examples/with-typescript-graphql): use codegen TypedDocumentNode and GraphQL Yoga for better DX and smaller bundle size (#36240) 2022-05-23 16:58:27 +00:00
jest.config.js fix: Order moduleFileExtensions left-to-right (#18328) 2020-10-27 20:20:03 +00:00
next-env.d.ts Include submodules in exported type definition (#28316) 2021-11-26 14:46:56 +01:00
next.config.js [Docs] Add config types to all examples (#40083) 2022-08-31 16:41:22 -05:00
package.json refactor(examples/with-typescript-graphql): use codegen TypedDocumentNode and GraphQL Yoga for better DX and smaller bundle size (#36240) 2022-05-23 16:58:27 +00:00
README.md docs(examples): improve DX while copying command to create new project (#38410) 2022-07-26 21:57:48 -05:00
tsconfig.json refactor(examples/with-typescript-graphql): use codegen TypedDocumentNode and GraphQL Yoga for better DX and smaller bundle size (#36240) 2022-05-23 16:58:27 +00:00

README.md

TypeScript and GraphQL Example

One of the strengths of GraphQL is enforcing data types on runtime. Further, TypeScript and GraphQL Code Generator (graphql-codegen) make it safer by typing data statically, so you can write truly type-protected code with rich IDE assists.

This template gives you the best start to use GraphQL with fully typed queries (client-side) and resolvers (server-side), all this with minimum bundle size 📦

import { useQuery } from '@apollo/client'
import { ViewerDocument } from 'lib/graphql-operations'

const News = () => {
  // Typed already️⚡️
  const {
    data: { viewer },
  } = useQuery(ViewerDocument)

  return <div>{viewer.name}</div>
}

Deploy your own

Deploy the example using Vercel or preview live with StackBlitz

Deploy with Vercel

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-typescript-graphql with-typescript-graphql-app

yarn create next-app --example with-typescript-graphql with-typescript-graphql-app

pnpm create next-app --example with-typescript-graphql with-typescript-graphql-app

Deploy it to the cloud with Vercel (Documentation).