DEV Community

loading...

Create a sample app with TypeScript, React, typeorm, type-graphql. graphql-code-generator while reading "Learning GraphQL"

Hideaki Ishii
I'm a Software Engineer, who mainly uses Ruby / Rails, JavaScript / TypeScript, Golang, etc.
・2 min read

Recently, I was reading a book Learning GraphQL to learn GraphQL.
To understand it deeply, I tried to create a sample app: https://github.com/danimal141/learning-graphql-ts

It's not interesting to just copy a sample app written in the book, so I used TypeScript, typeorm, type-graphql, graphql-code-generator.
I'm happy if this post is helpful for someone who tries to create the same application.

Common

  • The book uses JavaScript but I used TypeScript.
    • GraphQL itself has a type system, so I think TypeScript and GraphQL are compatible.
  • Adopted a Monorepo directory structure.
  • Used npm-run-all to enable to run commands for the front-end and back-end at once.
  • Used lint-staged and husky to run Prettier when committing.
  • Add ESLint etc.
  • Sorry for skipping tests...

back-end

  • Used typeorm and type-graphql to define the GraphQL schema and DB schema conveniently.
    • type-graphql automatically generates the schema file :)
    • It might be better o try Nest.js...?

front-end

  • Used create-react-app to create a TypeScript based project.
    • Created only the user list view and login feature.
    • The React way in the book seemed a bit old so I used React hooks actively.
  • Used graphql-code-generator to generate the types for TypeScript from the GraphQL schema that the back-end generated.
  • Child components defines only GraphQL fragments and Root component should construct the whole query as much as possible (Fragment colocation).
  • Login feature was a bit hard for me because it's my first time to use Mutation...
    • The book uses Mutation component、but I used React hooks instead.

Conclusion

  • GraphQL is awesome.
  • TypeScript and GraphQL are compatible.
  • typeorm seems good for back-end developments.

References

Discussion (1)

Collapse
sirseanofloxley profile image
Sean Allin Newell

I'd love to see some highlights in code blocks in the article.