/twitterish-graphql-example

An Web front-end example project using GraphQL

Primary LanguageTypeScript

Twitterish GraphQL example

License: MIT build status typescript-image supports Node.js react-image code style: prettier

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