https://github.com/2wce/recipe-app-api
GraphQL API for my recipes app
https://github.com/2wce/recipe-app-api
Last synced: about 1 year ago
JSON representation
GraphQL API for my recipes app
- Host: GitHub
- URL: https://github.com/2wce/recipe-app-api
- Owner: 2wce
- Created: 2020-04-03T13:32:43.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T18:24:22.000Z (over 3 years ago)
- Last Synced: 2025-02-01T12:12:09.039Z (over 1 year ago)
- Language: TypeScript
- Size: 1.09 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# prisma-template
This example shows how to implement an **GraphQL server (SDL-first) with TypeScript** based on [Prisma Client](https://www.prisma.io/docs/reference/tools-and-interfaces/prisma-client/api), [graphql-yoga](https://github.com/prisma/graphql-yoga) and [graphql-tools](https://www.apollographql.com/docs/graphql-tools/). It is based on a SQLite database, you can find the database file with some dummy data at [`./prisma/dev.db`](./prisma/dev.db).
## How to use
### 1. Download example & install dependencies
Clone this repository:
```
git clone git@github.com:2wce/prisma-template.git
```
Install npm dependencies:
```
cd prisma-template
npm install
```
Note that this also generates Prisma Client JS into `node_modules/@prisma/client` via a `postinstall` hook of the `@prisma/client` package from your `package.json`.
### 2. Start the GraphQL server
Launch your GraphQL server with this command:
```
npm run dev
```
Navigate to [http://localhost:4000](http://localhost:4000) in your browser to explore the API of your GraphQL server in a [GraphQL Playground](https://github.com/prisma/graphql-playground).
## Using the GraphQL API
The schema that specifies the API operations of your GraphQL server is defined in [`./src/schema/schema.graphql`](./src/schema/schema.graphql). Below are a number of operations that you can send to the API using the GraphQL Playground.
Feel free to adjust any operation by adding or removing fields. The GraphQL Playground helps you with its auto-completion and query validation features.
### Retrieve all published posts and their authors
```graphql
query {
feed {
id
title
content
published
author {
id
name
email
}
}
}
```
See more API operations
### Create a new user
```graphql
mutation {
signupUser(data: { name: "Sarah", email: "sarah@prisma.io" }) {
id
}
}
```
### Create a new draft
```graphql
mutation {
createDraft(
title: "Join the Prisma Slack"
content: "https://slack.prisma.io"
authorEmail: "alice@prisma.io"
) {
id
published
}
}
```
### Publish an existing draft
```graphql
mutation {
publish(id: __POST_ID__) {
id
published
}
}
```
> **Note**: You need to replace the `__POST_ID__`-placeholder with an actual `id` from a `Post` item. You can find one e.g. using the `filterPosts`-query.
### Search for posts with a specific title or content
```graphql
{
filterPosts(searchString: "graphql") {
id
title
content
published
author {
id
name
email
}
}
}
```
### Retrieve a single post
```graphql
{
post(where: { id: __POST_ID__ }) {
id
title
content
published
author {
id
name
email
}
}
}
```
> **Note**: You need to replace the `__POST_ID__`-placeholder with an actual `id` from a `Post` item. You can find one e.g. using the `filterPosts`-query.
### Delete a post
```graphql
mutation {
deleteOnePost(where: { id: __POST_ID__ }) {
id
}
}
```
> **Note**: You need to replace the `__POST_ID__`-placeholder with an actual `id` from a `Post` item. You can find one e.g. using the `filterPosts`-query.
## Evolving the app
Evolving the application typically requires four subsequent steps:
1. Migrating the database schema using SQL
1. Update your Prisma schema by introspecting the database with `prisma introspect`
1. Generating Prisma Client to match the new database schema with `prisma generate`
1. Use the updated Prisma Client in your application code
For the following example scenario, assume you want to add a "profile" feature to the app where users can create a profile and write a short bio about themselves.
### 1. Change your database schema using SQL
The first step would be to add a new table, e.g. called `Profile`, to the database. In SQLite, you can do so by running the following SQL statement:
```sql
CREATE TABLE "Profile" (
"id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
"bio" TEXT,
"user" TEXT NOT NULL UNIQUE REFERENCES "User"(id) ON DELETE SET NULL
);
```
To run the SQL statement against the database, you can use the `sqlite3` CLI in your terminal, e.g.:
```bash
sqlite3 dev.db \
'CREATE TABLE "Profile" (
"id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
"bio" TEXT,
"user" TEXT NOT NULL UNIQUE REFERENCES "User"(id) ON DELETE SET NULL
);'
```
Note that we're adding a unique constraint to the foreign key on `user`, this means we're expressing a 1:1 relationship between `User` and `Profile`, i.e.: "one user has one profile".
While your database now is already aware of the new table, you're not yet able to perform any operations against it using Prisma Client. The next two steps will update the Prisma Client API to include operations against the new `Profile` table.
### 2. Introspect your database
The Prisma schema is the foundation for the generated Prisma Client API. Therefore, you first need to make sure the new `Profile` table is represented in it as well. The easiest way to do so is by introspecting your database:
```
npx prisma introspect
```
> **Note**: You're using [npx](https://github.com/npm/npx) to run Prisma 2 CLI that's listed as a development dependency in [`package.json`](./package.json). Alternatively, you can install the CLI globally using `npm install -g @prisma/cli`. When using Yarn, you can run: `yarn prisma dev`.
The `introspect` command updates your `schema.prisma` file. It now includes the `Profile` model and its 1:1 relation to `User`:
```prisma
model Post {
author User?
content String?
id Int @id
published Boolean @default(false)
title String
}
model User {
email String @unique
id Int @id
name String?
post Post[]
profile Profile?
}
model Profile {
bio String?
id Int @id
user User
}
```
### 3. Generate Prisma Client
With the updated Prisma schema, you can now also update the Prisma Client API with the following command:
```
npx prisma generate
```
This command updated the Prisma Client API in `node_modules/@prisma/client`.
### 4. Use the updated Prisma Client in your application code
You can now use your `PrismaClient` instance to perform operations against the new `Profile` table. Here are some examples:
#### Create a new profile for an existing user
```ts
const profile = await prisma.profile.create({
data: {
bio: 'Hello World',
user: {
connect: { email: 'alice@prisma.io' },
},
},
})
```
#### Create a new user with a new profile
```ts
const user = await prisma.user.create({
data: {
email: 'john@prisma.io',
name: 'John',
profile: {
create: {
bio: 'Hello World',
},
},
},
})
```
#### Update the profile of an existing user
```ts
const userWithUpdatedProfile = await prisma.user.update({
where: { email: 'alice@prisma.io' },
data: {
profile: {
update: {
bio: 'Hello Friends',
},
},
},
})
```