graphql-shop

Toying with graphql by coding a simple webshop app.

                                 

⚡ Quickstart

🔶 Launching database instance

pnpm docker-db

🔶 Seeding database

pnpm docker-db-seed

🔶 Launching frontend and backend services

pnpm dev

🔶 Launching tests

pnpm nx run-many --target=test --all

⚡ Subject

The purpose of our app will be to sell products to customers by allowing them to place orders. This gives us several features to address, typical for an online webapp store:

• Products display, filtering and actions
• Shopping cart
• Login / Signup
• Shipping options
• Payment mockup
• Orders history

⚡ Stack

🔶 Tooling - pnpm | nx | graphql-codegen

🧿 nx

nx is a great tool for monorepos. It will allow us to define both our backend and our frontend in the same repo. We will also split up the codebase further with the use of nx libraries.

🧿 Graphql Codegen

We are using a tool to generate code based on react-query from the backend graphql schema and graphql code defined in our frontend. Here is a little schema:

• On the backend, our graphql schema is an autogenerated file from nest graphql module, which based on apollo server.
• On the frontend, we start by defining atomic queries/mutation in graphql; these files are pulled by the codegen tool to autogenerate react-query queries/mutations, along with their related types.

Generation is as simple as executing this command:

pnpm nx fetch lib-graphql-codegen

🔶 Backend - nest | prisma

We are using nest graphql module to define what will be exposed on the graphql schema. Nest module is very similar to typegraphql: we define resolvers that will contain functions annotated with decorators defined in @nestjs/graphql to define our queries, mutations and fields resolution.

These resolvers rely on a service layer that is responsible for the interaction with our database, using prisma ORM.

🔶 Frontend - next | jotai | react-query | tailwind

As for frontend, the api layer is already resolved for us thanks to the codegen mentioned earlier. We do need some transient state however. I chose jotai for this, which is very flexible, simple and elegant.

All we have to do is to define atomic state that can then be consumed anywhere in the components tree.

🔶 Deployment - docker | vercel | fly.io

Frontend deployment is really easy thans to vercel. However, when it comes to backend, we have several choices, some more onerous than others. I personally chose fly.io as a replacement for heroku free dynos.

⚡ Database

🔶 Creating a new migration

pnpm prisma-migrate <migration_name>

🔶 Seeding database manually

pnpm prisma-seed