Api Platform + GraphQL + Apollo + TypeScript

Api Platform + GraphQL + Apollo + TypeScript.md

Api Platform + GraphQL + Apollo + TypeScript

Symfony | Api Platform | GraphQL | Apollo | TypeScript | React Hooks

Backend

Install Api Platform

composer req api

Install GraphQL

composer req webonyx/graphql-php

Frontend

Install apollo and graphql

yarn add apollo-boost @apollo/react-hooks graphql

Install codegen for typescript this will generate the types and interfaces automatically

yarn add @graphql-codegen/cli @graphql-codegen/typescript

Configure codegen

# codegen.yml
schema: http://localhost:8000/api/graphql
generates:
  src/services/graphql/types.ts:
    - typescript

run codegen to generate the types in src/services/graphql/types.ts

yarn graphql-codegen

In case you are using SSL on your localhost:8000, run the command like this:

NODE_TLS_REJECT_UNAUTHORIZED=0 yarn graphql-codegen

Also, if you implemented JWT auth to access your graphql endpoints, use this codegen configuration:

schema:
  - 'https://your-graphql-url':
      headers:
        authorization: 'Bearer ...'