rsnext/examples/with-graphql-gateway
ChanHui 8d45aa9bfb
update @types/react version in examples (#57259)
### What?
When I ran `npx create-next-app --example with-turbopack` and installed
dependencies using `yarn`, I found an typescript error(`'SomeComponent'
cannot be used as a JSX component.`).

<img
src="https://github.com/vercel/next.js/assets/51700274/f6c7e478-c0b1-4ea2-996f-4c0c78e3bb4b"
width=400 />

and I realized that the bug is due to the version of
@types/react(18.0.x).
you can check this issue on
[here](https://github.com/vercel/next.js/issues/42292#issuecomment-1594351684)
too.

### Why?
It seems that there is an error occurring in the @types/react version
18.0.x.

### How?
It would be good to change the @types/react version to 18.2.8 in the
next.js examples.

I think this change will resolve [this
issue](https://github.com/vercel/next.js/issues/55080#issue-1884846177)
[NestJS
documentation](https://nextjs.org/docs/app/building-your-application/configuring/typescript#async-server-component-typescript-error)
also states to upgrade the version.

Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2023-10-26 19:52:08 -05:00
..
pages Open deploy link in new window for examples (#40804) 2022-09-22 09:33:36 -07:00
public feat(examples): build a GraphQL Gateway with GraphQL Mesh and Next.js API routes (#36439) 2022-05-23 11:02:21 -05:00
styles feat(examples): build a GraphQL Gateway with GraphQL Mesh and Next.js API routes (#36439) 2022-05-23 11:02:21 -05:00
.gitignore Add .yarn/install-state.gz to .gitignore (#56637) 2023-10-18 16:34:48 +00:00
.meshrc.yaml feat(examples): build a GraphQL Gateway with GraphQL Mesh and Next.js API routes (#36439) 2022-05-23 11:02:21 -05:00
next-env.d.ts Remove incorrect entries for pnpm debug log (#47241) 2023-03-26 22:26:05 -07:00
next.config.js feat(examples): build a GraphQL Gateway with GraphQL Mesh and Next.js API routes (#36439) 2022-05-23 11:02:21 -05:00
package.json update @types/react version in examples (#57259) 2023-10-26 19:52:08 -05:00
README.md update example Deploy button URLs (#48842) 2023-04-26 13:31:44 -04:00
tsconfig.json feat(examples): build a GraphQL Gateway with GraphQL Mesh and Next.js API routes (#36439) 2022-05-23 11:02:21 -05:00

GraphQL Gateway using GraphQL Mesh and Next.js API routes

This is a simple set up for Next.js using GraphQL Mesh to build a GraphQL Gateway based on a REST API.

GraphQL Mesh is a framework that allows to build GraphQL Gateway server, based on one or multiple source APIs (REST, SOAP, gRPC, GraphQL or Databases).

graph TD;
subgraph AA [" "]
A[Mobile app];
B[Web app];
C[Node.js client];
end
subgraph BB [" "]
E[REST API];
F[GraphQL API];
G[SOAP API];
end
Z[GraphQL Gateway API on a Next.js API route];
A & B & C --> Z;
Z --> E & F & G;

Configuring GraphQL Mesh only requires installing the required packages and providing a .meshrc.yaml configuration file.

This project translate the PetStore REST API (https://petstore.swagger.io/) to a GraphQL API by simply providing the following configuration:

.meshrc.yaml

sources:
  - name: PetStore
    handler:
      newOpenapi:
        baseUrl: https://petstore.swagger.io/v2/
        oasFilePath: https://petstore.swagger.io/v2/swagger.json

More information on GraphQL Mesh configuration and concepts are available in our documentation.


Deploy your own

Deploy the example using Vercel:

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-graphql-gateway with-graphql-gateway-app
yarn create next-app --example with-graphql-gateway with-graphql-gateway-app
pnpm create next-app --example with-graphql-gateway with-graphql-gateway-app