This is a Next.js project bootstrapped with create-next-app
.
First, run the development server:
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx
. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts
.
The pages/api
directory is mapped to /api/*
. Files in this directory are treated as API routes instead of React pages.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
Here is the quickstart tool where you can dump graphql schemas and documents to quickly generate TS files https://www.graphql-code-generator.com/
Install the graphql codegen tool from here: https://github.com/dotansimha/graphql-code-generator
yarn add graphql
yarn add -D @graphql-codegen/cli
GraphQL Code Generator lets you setup everything by simply running the following command:
yarn graphql-codegen init
Question by question, it will guide you through the whole process of setting up a schema, selecting plugins, picking a destination of a generated file, and a lot more.
After initializing, make sure you tun yarn install
as new deps will be added to package.json
For this project, the Star Wars API at https://www.back4app.com/database/davimacedo/swapi-star-wars-api/graphql-playground
can be connected to directly. Simply go to the GraphQL playground and then open the Chrome dev tools Network panel.
Next make a query and execute. Then look for the graphql
request and pull out the two auth headers x-parse-application-id
and
x-parse-master-key
. Put these into a .env
file and save for later. In this project we used NEXT_PUBLIC_SW_APP_ID
and NEXT_PUBLIC_SW_MASTER_KEY
respectively as we will need these in the Next.js front-end and need to prefix with NEXT_PUBLIC
.
The graphql endpoint URL is:
https://parseapi.back4app.com/graphql
Back4App uses the provided x-parse-application-id
and x-parse-master-key
to know what schema is being accessed.
In Step 1 above, codegen.yml
will be created. We want to modify it to look like this.
# codegen.yml
overwrite: true
schema:
- https://parseapi.back4app.com/graphql:
headers:
"X-Parse-Application-Id": "${NEXT_PUBLIC_SW_APP_ID}"
"X-Parse-Master-Key": "${NEXT_PUBLIC_SW_MASTER_KEY}"
documents: "components/**/*.graphql"
generates:
generated/graphql.tsx:
plugins:
- "typescript"
- "typescript-operations"
- "typescript-react-apollo"
./schema.graphql:
plugins:
- "schema-ast"
./graphql.schema.json:
plugins:
- "introspection"
Things to note about the codegen.yml
:
- Notice the values in the headers property of the schema configuration where we are adding the headers
X-Parse-Application-Id
andX-Parse-Master-Key
which point toNEXT_PUBLIC_SW_APP_ID
andNEXT_PUBLIC_SW_MASTER_KEY
respectively.- Read more on adding headers and schema config to
codegen.yml
here https://www.graphql-code-generator.com/docs/config-reference/schema-field#headers
- Read more on adding headers and schema config to
- The
generated/graphql.tsx
file and associated plugins. This file contains TS Types generated from the schema for use in front-end. - The
./schema.graphql
. This schema file will be consumed by the WebStorm graphql plugin to provide intellisense help.
Then make sure you have this in package.json
scripts.
"gql-codegen": "graphql-codegen -r dotenv/config --watch --config codegen.yml"
For the .env
file we created early to load, you must have dotenv
install in the project. Read more here: https://www.graphql-code-generator.com/docs/config-reference/codegen-config#environment-variables
Then run this script with
npm run gql-codegen
If you get an error because documents aren't loading, this should go away one you start adding .graphql
files to the project
If you haven't already creating a .graphqlconfig file, do so now with this template below.
// .graphqlconfig
{
"name": "Star Wars API",
"schemaPath": "./schema.graphql",
"extensions": {
"endpoints": {
"Star Wars API": {
"url": "https://parseapi.back4app.com/graphql",
"headers": {
"X-Parse-Application-Id": "${env:NEXT_PUBLIC_SW_APP_ID}",
"X-Parse-Master-Key": "${env:NEXT_PUBLIC_SW_MASTER_KEY}"
},
"introspect": true
}
}
}
}
A few things to note:
- The
schemaPath
prop points to the generatedschema.graphql
from the codegen tool - The
extensions.endpoints."Star Wars API".url
prop points to the Back4App graphql endpoint - The same headers used previously for authenticating to the graphql endpoint.
- Note we need to add
env:
before the env var
- Note we need to add
**And that's it! Now the schema files being generated by the GraphQL codegen will be piped into the schema for
Other resources: