https://github.com/jpb06/graphql-shop
https://github.com/jpb06/graphql-shop
graphql monorepo nestjs nextjs nx prisma react
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/jpb06/graphql-shop
- Owner: jpb06
- License: mit
- Created: 2022-08-23T09:42:00.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-07-05T18:20:31.000Z (about 1 year ago)
- Last Synced: 2025-08-11T18:42:41.681Z (12 months ago)
- Topics: graphql, monorepo, nestjs, nextjs, nx, prisma, react
- Language: TypeScript
- Homepage: https://graphql-shop-seven.vercel.app
- Size: 5.27 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# graphql-shop
Toying with graphql by coding a simple webshop app.
## ⚡ Quickstart
### 🔶 Launching database instance
```bash
pnpm docker-db
```
### 🔶 Seeding database
```bash
pnpm docker-db-seed
```
### 🔶 Launching frontend and backend services
```bash
pnpm dev
```
### 🔶 Launching tests
```bash
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](https://pnpm.io) | [nx](https://nx.dev/getting-started/intro) | [graphql-codegen](https://github.com/dotansimha/graphql-code-generator)
#### 🧿 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](https://the-guild.dev/graphql/codegen) 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:
```bash
pnpm nx fetch lib-graphql-codegen
```
### 🔶 Backend - [nest](https://docs.nestjs.com) | [prisma](https://www.prisma.io/docs/getting-started)
We are using nest graphql module to define what will be exposed on the graphql schema. Nest module is very similar to [typegraphql](https://typegraphql.com): 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](https://nextjs.org/docs/getting-started) | [jotai](https://jotai.org/docs/introduction) | [react-query](https://tanstack.com/query/v4/docs/overview) | [tailwind](https://tailwindcss.com/docs/installation)
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](https://docs.docker.com) | [vercel](https://vercel.com/docs) | [fly.io](https://fly.io/docs/)
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
```bash
pnpm prisma-migrate
```
### 🔶 Seeding database manually
```bash
pnpm prisma-seed
```