Twitterish GraphQL example

The purpose of this project is to learn the followings.

• How to use GraphQL API on the Web front-end
  • How to use GraphQL client
  • How to develop GraphQL client with TypeScript
  • To investigate the effective GraphQL client development workflow
• How to integrate React and GraphQL

Prerequisites

$ node -v
v10.16.x

$ npm -v
6.9.x

Development

• Install dependencies

$ npm i

• Start mock GraphQL server
  • You can use GraphiQL on http://localhost:3033/graphql.

$ npm start

• Watch to build front-end code

$ npm run watch:build

• Format code

$ npm run prettier

• Run unit testing

$ npm test

GraphQL client workflow

• How to create a GraphQL client for a new query/mutation.
  • (Optional) Write source fragments which you use in your GraphQL operations like src/infra/twitter/graphql/src/fragment/Tweet.graphql.
    • You can re-use these source fragments in another operations if you want to.
  • Write a source GraphQL document like src/infra/twitter/graphql/src/GetTweets.graphql.
    • If you have already defined fragments which your operations need in src/infra/twitter/graphql/src/fragment directory, you don't have write fragment definitions on your operations because graphql-concat will concatnate those fragments and source GraphQL documents.
  • Create the valid GraphQL documents from your source GraphQL documents with npm run gql:cat.
    • You will get the valid GraphQL documents as TypeScript variables in src/infra/twitter/graphql/dist.
  • Generate TypeSript type definition file for GraphQL operations with npm run gql:gen.
    • You will get a definition file in src/infra/twitter/DefinitionTypes.ts.
  • Write a GraphQL client module like src/infra/twitter/getTweets.ts.
  • Write unit test cases for the GraphQL client module like src/infra/twitter/getTweets.spec.ts.

References

• GraphQL spec
• Facebook GraphQL Relay Cursor Connections Specification
• GraphQL Clients docs
• Apollo Client docs
• GraphQL code generator