Skip to content

Latest commit

 

History

History
73 lines (48 loc) · 2.75 KB

README.md

File metadata and controls

73 lines (48 loc) · 2.75 KB

GraphQL, Apollo Client, CodeGen and NextJS with TypeScript

Enviorment

FBI-api token:

NEXT_PUBLIC_ACCESS_TOKEN should be set inside a .env.local file


NEXT_PUBLIC_ACCESS_TOKEN = token

CodeGen

  • Generates TypeScript types from graphql which results in end-to-end type saftey Read more

  • Codegen will look at any .graphql or .gql file inside the /graphql/queries folder.

  • CodeGen configuration -> codegen.yml

npm run codegen
#will generate new graphql/generated/schema.ts file
npm run codegenw
#will generate new graphql/generated/schema.ts and watch for changes in .graphql and .gql files
npm run dev
# Will also run "npm run codegen" on start 
  • This VS Code extension will auto generate the schema.ts file every time you hit save inside .gql or .graphql file.

  • pages/index.tsx does not use CodeGen files. Only Apollo Client.


Apollo Client & Codegen

A hook will be generated for each query inside graphql/queries. The hook can be imported from graphql/generated/schema.ts. See pages/work/[id].tsx for an example. useGetWorkQuery()


Next

This is a Next.js project bootstrapped with create-next-app.

Getting Started

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.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

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.