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

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 yarn workspace to put all packages together.
• 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

• https://www.oreilly.com/library/view/learning-graphql/9781492030706/
• https://classic.yarnpkg.com/blog/2017/08/02/introducing-workspaces/
• https://github.com/mysticatea/npm-run-all
• https://github.com/okonet/lint-staged
• https://github.com/typicode/husky
• https://github.com/typeorm/typeorm
• https://github.com/MichalLytek/type-graphql
• https://github.com/nestjs/nest
• https://github.com/facebook/create-react-app
• https://github.com/dotansimha/graphql-code-generator

Comments

[Mason]

Thank you for this blog post and sharing your project.
Have you tried the ORM prisma.io/ ?
I would be interested to know your opinion about it (Prisma VS TypeORM).

[Hideaki Ishii]

Thank you for your reply!

TypeORM uses Decorator definitions for schema definitions and entities in the same class, but this may become complicated when the definitions become complex, and since the DB type depends on Decorator, it may differ from the type of the class definition.

To be honest, I don't have any experience in using Prisma, but it seems like Prisma tries to solve such TypeORM problems :)

There is a migration guild: prisma.io/docs/guides/migrate-to-p...

[Sean Allin Newell]

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