Relay Workshop with Expo

Requirements

Test Server (HackaTalk)

• SourceCode
• Installation

Install Relay

Here is installation guide for relay and we'll summarize them here.

1. Install relay

   yarn add react react-dom react-relay
   yarn add -D relay-config babel-plugin-relay graphql relay-compiler relay-compiler-language-typescript

2. Create the configuration file

   module.exports = {
     exclude: ['**/node_modules/**', '**/__mocks__/**', '**/__generated__/**'],
     src: './src',
     schema: 'schema.graphql',
     language: 'typescript',
     artifactDirectory: './src/__generated__',
     noFutureProofEnums: true,
   };

   Note that the schema path should be the schema generated from Test Server. We'll see how to generate it automatically soon.

3. Add npm script in package.json

    "relay": "relay-compiler",
    "relay-watch": "yarn relay-compiler --watch",

   Running yarn relay will generate schema types.

Install graphql-codegen

You can automatically download schema.graphql from server and generate types with graphql-code-generator.

1. Install packages

   yarn add -D get-graphql-schema @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-document-nodes @graphql-codegen/typescript-graphql-files-modules @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo

   Currently, below are the packages versions.

   "get-graphql-schema": "^2.1.2",
   "@graphql-codegen/cli": "^1.21.6",
   "@graphql-codegen/typescript": "^1.22.4",
   "@graphql-codegen/typescript-document-nodes": "^1.17.15",
   "@graphql-codegen/typescript-graphql-files-modules": "^1.18.1",
   "@graphql-codegen/typescript-operations": "^1.18.3",
   "@graphql-codegen/typescript-react-apollo": "^2.3.0",

2. Add below scripts to package.json.

   "schema": "get-graphql-schema http://localhost:4000/graphql > schema.graphql",
   "codegen": "graphql-codegen --config codegen.yml",
   "generate": "yarn schema && yarn codegen",
   

3. Add codegen.yml

   overwrite: true
   schema:
     - './schema.graphql'
   generates:
     src/types/graphql.tsx:
       config:
         gqlImport: graphql-tag
         skipDocumentsValidation: true
         flattenGeneratedTypes: true
         enumsAsTypes: true
       plugins:
         - 'typescript'
         - 'typescript-operations'
         - 'typescript-react-apollo'

   Follow codegen-specification for detailed information.

4. While the server is running, run yarn generate. This will generate src/types/graphql.tsx which has all schema types. You can safely ignore type warning in .eslintignore.

   • Create .eslintignore file.

     touch .eslintignore

   • Add src/types/graphql.tsx in .eslintignore.

Codegen Sepecification

Description on specs we use for in codegen.

Config

• skipDocumentsValidation When using relay, some relay style arguments fails when running codgen. You can see related issue here.

  Therefore we are setting this value to true.

• flattenGeneratedTypes Flatten fragment spread and inline fragments into a simple selection set before generating.

• gqlImport type: string default: graphql-tag#gql

  Customize from which module will gql be imported from. This is useful if you want to use modules other than graphql-tag, e.g. graphql.macro.

• enumsAsType type: boolean default: false

  Generates enum as TypeScript type instead of enum.

Plugin

Describes plugins we are using for graphql codegen.

• typescript-operations This plugin generates TypeScript types based on your GraphQLSchema and your GraphQL operations and fragments. It generates types for your GraphQL documents: Query, Mutation, Subscription and Fragment.

  Note: In most configurations, this plugin requires you to use `typescript as well, because it depends on its base types.

• typescript-react-apollo This plugin generates React Apollo components and HOC with TypeScript typings.

  It extends the basic TypeScript plugins: @graphql-codegen/typescript, @graphql-codegen/typescript-operations - and thus shares a similar configuration.

What's more

• runtime-config
• query-and-mutation
• fragment
• relay-cursor-pagination
• cache invalidation