archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
rsnext/examples/api-routes-graphql/README.md

45 lines
2.4 KiB
Markdown
Raw Normal View History

Example for GraphQL server with API routes (#7804) * Example for GraphQL server with API routes * Update examples/api-routes-graphql/pages/index.js Co-Authored-By: Luis Fernando Alvarez D. <luis@zeit.co>
2019-07-09 00:37:51 +02:00
# API routes with GraphQL server
feat(examples): refactor `api-routes-graphql` to GraphQL Yoga (#36155) GraphQL Yoga provides a more extensible experience ([Envelop plugins](https://envelop.dev/)) and lighter bundle than the previously showcased `apollo-server-micro` ([64.5kB](https://bundlephobia.com/package/@graphql-yoga/node@2.2.1) vs [196.2kB](https://bundlephobia.com/package/apollo-server-micro@3.6.7) - min & GZiped) Similar to Next.js, GraphQL Yoga comes with strong defaults and out-of-the-box support for modern GraphQL features (File uploads, subscriptions, and more). Strong of many years of existence and a large community, GraphQL Yoga 2.0 comes with Next.js support with no additional package or configuration 📦 Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-05-23 18:27:41 +02:00
Next.js ships with [API routes](https://nextjs.org/docs/api-routes/introduction), which provide an easy solution to build your own `API`.
This example showcases how to build a lightweight and blazing fast GraphQL API with minimum configuration using GraphQL Yoga.
GraphQL Yoga comes with strong defaults:
- CORS is enabled by default
- Automatically masking unexpected errors and preventing sensitive information from leaking to clients.
- Shipped with GraphiQL
Yoga also brings support (with no additional dependency) for subscriptions, file uploads, and your favorite schema-building library (GraphQL Tools, Pothos, Nexus, TypeGraphQL, SDL first schema-design approaches, graphql-js, Apollo Tools).
More information on all available features are available [on the official documentation](https://www.graphql-yoga.com/docs/quick-start).
Finally, GraphQL Yoga is built on top of Envelop. Envelop is a library that helps build GraphQL API faster and flexibly with plugin-based architecture.
Similar to Express middlewares allowing you to customize requests' behavior, Envelop applies the same idea to GraphQL requests.
More information on [Envelop documentation](https://www.envelop.dev/).
Make example READMEs more consistent (#10124) * npx create → npm init * Fix inconsistent instructions * Update amp-first * Update with-graphql-react * with-firebase-cloud-messaging * Update with-higher-order-component * change create-next-app url * Update create-next-app instruction * Update instructions to use npm instead of npx * Move "the idea behind the example" to top * Rename * Rename * Update contributing.md with a README template
2020-01-16 23:23:56 +01:00
Add the deploy button to compatible examples (#9547)
2019-11-27 17:40:58 +01:00
## Deploy your own
Change README structure in examples (#35349) Changed the README structure in all examples to take out the Stackblitz button and include it as a link instead using a [bash script](https://gist.github.com/Nutlope/a8f3556a5a401e32a8c6278b782ebf8a/revisions). I also added the Vercel deploy button to 15 READMEs that didn't have it.
2022-03-16 22:39:26 +01:00
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-graphql)
Add the deploy button to compatible examples (#9547)
2019-11-27 17:40:58 +01:00
Fix deploy buttons URLs (#20834) Fix all deploy button URLs in the Next.js repo to follow the following format: ``` https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/<EXAMPLE_NAME>&project-name=<EXAMPLE_NAME>&repository-name=<EXAMPLE_NAME> ``` The detailed docs for the Deploy Button can be found here: https://vercel.com/docs/more/deploy-button. Also updates legacy Vercel import flow URLs (starting with vercel.com/import or with vercel.com/new/project), to use the new vercel.com/new URLs. --- For example, for the `hello-world` example: The URL is https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world And the deploy button looks like this: [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world) --- For reference, I used the following regexes to search for the incorrect URLs ``` \(https://vercel.com/import/git\?s=https://github.com/vercel/next.js/tree/canary/examples/(.*)\) \(https://vercel.com/import/git\?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/([^&]*)(.*)\) \(https://vercel.com/import/project\?template=https://github.com/vercel/next.js/tree/canary/examples/(.*)\) https://vercel.com/import/git https://vercel.com/import/select-scope https://vercel.com/import https://vercel.com/new/project ```
2021-01-07 02:40:29 +01:00
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/api-routes-graphql&project-name=api-routes-graphql&repository-name=api-routes-graphql)
Add the deploy button to compatible examples (#9547)
2019-11-27 17:40:58 +01:00
Example for GraphQL server with API routes (#7804) * Example for GraphQL server with API routes * Update examples/api-routes-graphql/pages/index.js Co-Authored-By: Luis Fernando Alvarez D. <luis@zeit.co>
2019-07-09 00:37:51 +02:00
## How to use
add pnpm link to docs (#37221) ## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) Co-authored-by: Steven <steven@ceriously.com>
2022-05-27 21:46:38 +02:00
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
Example for GraphQL server with API routes (#7804) * Example for GraphQL server with API routes * Update examples/api-routes-graphql/pages/index.js Co-Authored-By: Luis Fernando Alvarez D. <luis@zeit.co>
2019-07-09 00:37:51 +02:00
```bash
Suggest `npx` over `npm init` (#13637) This updates old examples to the more universal `npx` command. Fixes https://github.com/vercel/next.js/discussions/12103
2020-06-01 19:36:57 +02:00
npx create-next-app --example api-routes-graphql api-routes-graphql-app
docs(examples): improve DX while copying command to create new project (#38410) * docs(examples): improve DX while copy command to create new project * chore: apply code review Co-authored-by: Marcos Bérgamo <Marcos.Bergamo@refinitiv.com> Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-07-27 04:57:48 +02:00
```
```bash
Example for GraphQL server with API routes (#7804) * Example for GraphQL server with API routes * Update examples/api-routes-graphql/pages/index.js Co-Authored-By: Luis Fernando Alvarez D. <luis@zeit.co>
2019-07-09 00:37:51 +02:00
yarn create next-app --example api-routes-graphql api-routes-graphql-app
docs(examples): improve DX while copying command to create new project (#38410) * docs(examples): improve DX while copy command to create new project * chore: apply code review Co-authored-by: Marcos Bérgamo <Marcos.Bergamo@refinitiv.com> Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-07-27 04:57:48 +02:00
```
```bash
Update `pnpm create next-app` for latest pnpm 6 and 7 (#37254) This command changed in pnpm [6.32.13](https://github.com/pnpm/pnpm/releases/tag/v6.32.13) and [7.1.1](https://github.com/pnpm/pnpm/releases/tag/v7.1.1) so lets update it since its been a few weeks and we can expect pnpm users to update more regularly than npm users. - Fixes https://github.com/vercel/next.js/pull/37240 - Fixes https://github.com/vercel/next.js/pull/37045 - Fixes https://github.com/vercel/next.js/pull/37032 - Fixes https://github.com/vercel/next.js/pull/36602 - Fixes https://github.com/vercel/next.js/pull/36496
2022-05-27 23:21:40 +02:00
pnpm create next-app --example api-routes-graphql api-routes-graphql-app
Example for GraphQL server with API routes (#7804) * Example for GraphQL server with API routes * Update examples/api-routes-graphql/pages/index.js Co-Authored-By: Luis Fernando Alvarez D. <luis@zeit.co>
2019-07-09 00:37:51 +02:00
```
Fix deploy buttons URLs (#20834) Fix all deploy button URLs in the Next.js repo to follow the following format: ``` https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/<EXAMPLE_NAME>&project-name=<EXAMPLE_NAME>&repository-name=<EXAMPLE_NAME> ``` The detailed docs for the Deploy Button can be found here: https://vercel.com/docs/more/deploy-button. Also updates legacy Vercel import flow URLs (starting with vercel.com/import or with vercel.com/new/project), to use the new vercel.com/new URLs. --- For example, for the `hello-world` example: The URL is https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world And the deploy button looks like this: [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world) --- For reference, I used the following regexes to search for the incorrect URLs ``` \(https://vercel.com/import/git\?s=https://github.com/vercel/next.js/tree/canary/examples/(.*)\) \(https://vercel.com/import/git\?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/([^&]*)(.*)\) \(https://vercel.com/import/project\?template=https://github.com/vercel/next.js/tree/canary/examples/(.*)\) https://vercel.com/import/git https://vercel.com/import/select-scope https://vercel.com/import https://vercel.com/new/project ```
2021-01-07 02:40:29 +01:00
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
Reference in a new issue Copy permalink