$ npx create-react-app my-app --template typescript

$ npm install apollo-boost react-apollo graphql react-apollo-hooks

$ npm add -D graphql @graphql-codegen/cli
$ npx gql-gen init

$ npm i graphql-codegen-typescript-template
$ npm i graphql-codegen-typescript-operations
$ npm i graphql-codegen/introspection

overwrite: true
schema:
  - http://localhost:3000/graphql:
documents:
  - './graphql/queries/*.graphql'
  - './graphql/mutations/*.graphql'
generates:
  ./src/generated/graphql.ts:
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'typescript-react-apollo'
    config:
      withComponent: false
      withHOC: false
      withHooks: true
  ./graphql/schema.json:
    plugins:
      - 'introspection'

$ npm run generate

FetchError: invalid json response body at http://localhost:3000/graphql reason: Unexpected token < in JSON at position 0

# controllers/application_controller.rb
skip_before_action :verify_authenticity_token

// middleware/index.ts
import ApolloClient from 'apollo-boost'

const client = new ApolloClient({
  uri: 'http://localhost:3000/graphql',
})

// client/src/index.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from './Components/App'
import { ApolloProvider } from 'react-apollo'
import { ApolloProvider as ApolloHooksProvider } from 'react-apollo-hooks'
import { client } from './middleware'
import * as serviceWorker from './serviceWorker'

ReactDOM.render(
  <ApolloProvider client={client}>
    <ApolloHooksProvider client={client}>
      <App />/
    </ApolloHooksProvider>
  </ApolloProvider>,
  document.getElementById('root')
)
serviceWorker.unregister()

# client/graphql/queries/issues.graphql
query issues {
  issues {
    title
    description
    status
    priority
    deadline
  }
}

$ npm run generate

import React from 'react'
import { useIssuesQuery } from '../../generated/graphql'
interface IssueProps {
  title: string
}

const Issue = ({ title }: IssueProps) => {
  const { data, error, loading } = useIssuesQuery()

  if (loading) return <div>Fetching</div>
  if (error) return <div>Error</div>
  if (!data) return <div>Data not found</div>

  return (
    <div>
      {console.log(data)}
      <h1>{title}</h1>
    </div>
  )
}

export default Issue