A TypeScript Fullstack GraphQL CodeGen Example

This example will show you how to dev with typescript fullstack with GraphQL Code Generator.

Tech Stack

• Language: TypeScript
• Package Manager: pnpm
• Client
  • vite: Dev Server / Bundler
  • react: Frontend Component Library
  • react-query: Fetching library integrated with React
  • axios: HTTP Client
• Server:
  • apollo-server-core: GraphQL server
  • fastify: HTTP server
  • graphql-code-generator
  • ts-node, ts-node-dev: TypeScript execution and REPL for node.js

Setup

Install dependencies:

pnpm i

Development

Opening repo.code-workspace with vscode is recommended.

Run apollo dev server:

# From repository root directory.
cd packages/apollo
pnpm dev

Start the frontend server:

# From repository root directory.
cd packages/app
pnpm dev

Check http://localhost:3000/

Modify schema.graphql or query.graphql and execute the command to regenerate the resolver type and the query functions:

pnpm generate

Production

Build static frontend app:

# From repository root directory.
cd packages/app
pnpm build

Start the server:

# From repository root directory.
cd packages/apollo
pnpm start

Check http://localhost:4000/

License

• Code: mit
• README: cc-by-sa-4.0