03.Prisma

Workshop 3 - GraphQL API with Prisma2

In this workshop, we will learn how to create GraphQL APIs using Prisma2, Nexus-Prisma and Apollo.

Step 0: initialization

All the required information to install the workshop dependencies are available in SETUP.md.

Step 1: Retrieve posts

You saw in the setup a query that retrieves all users from the database. Now, do the same thing but to get all the posts.

Create the getPosts function:

• It doesn't take any parameters
• It returns a list of all the posts in the database.

All the necessary information about the database schema are in the schema.prisma.

Step 2: Create - Read - Update - Delete

You've seen how data fetching with Prisma works, you'll now implement classic CRUD functions (see the title of this step).

If needed, refer to this page to see basics operations with Prisma. You will need the keyword where.

Create the addUser function:

• It takes in parameters name and email, the name and email of the user that will be created
• It adds the user to the database
• It returns the created userQuery

Create the addPost function:

• It takes in parameters title and content, the title and content of the post, as well as authorId, the id of the user who will be the author of the post.
• It adds the post to the database (this post must be connected to the authorId received in parameter)
• It returns the created post

Create the getPostsByUsers function:

• It takes in parameter authorId, the id of the user whose posts we want to retrieve
• It returns the list of posts of the requested user

Create the removeUser function:

• It takes in parameter id, the id of the user that will be deleted
• It returns the user who has been deleted

Create the removePost function:

• It takes in parameter id, the id of the post that will be deleted
• It returns the post that has been deleted

Step 3: Apollo Server and Nexus

Prisma allows us to retrieve data from the database, but we then have to allow the users to retrieve this data. We will use GraphQL Nexus and Apollo server for this purpose.

You will have to install new packages to do this:

Steps to install Apollo and Nexus

• Create a new folder named prisma-nexus-gql.
• Download the zip from our repo.
• Extract the zip into your prisma-nexus-gql.
• Run npm install in your prisma-nexus-gql folder to install the new dependencies.
• Run npm run migration to migrate the prisma schema in the database.
• Run npm run generate to generate prisma client and graphql queries.

You should see a warning message when you generate the schema.

If you subsequently run npm start, you will get a warning, which is normal. For the server to run properly, you have to add an objectType that defines the Post table in the entities folder.
An example of the User table is present in the folder, it's up to you to do Post.

Nexus model documentation

Step 4: Setting up the CRUD with Nexus

Now that your models are well defined, you can implement the data manipulations seen in Step 2, but this time with Nexus.

You will build in your schema a Query object that will contain the methods to read data and a Mutation object that will contain the methods to edit data (add / update / delete).

• For them to take effect, you will have to add these objects to the type field of your schema defined in schema.ts.

Nexus documentation about Queries and Mutations
The resolve field is where you will call prisma to query data inside the database

To test the queries/mutations you are going to set up, you can go to http://localhost:3000/ to use a playground that lets you to test your server.

We already gave the getUsers query and the signupUser mutation to let you see what the syntax looks like, and make it easier to create the next ones.
Below, we also give you examples to test your queries and mutations.

Create the following queries:

• getPosts: returns the list of all posts in the database
• getPostsByUser: returns the list of all the posts of a user thanks to its authorId.
• getPublishedPosts: returns a list of all posts that are published.

Create the following mutations:

• writeDraft: creates a post with a title, a content and the authorId of its author. By default it is not published.
• publishDraft: publishes a post whose id is specified.
• deletePost: deletes a post whose id is specified.

Here are some examples of queries and mutations you can execute in the playground to test your functions

See Query and Mutations (Click me!)

Query

getUsers

query {
  getUsers {
    id
    name
    email
    posts {
      id
      title
    }
  }
}

getPosts

query {
  getPosts {
    id
    title
    content
    published
    author {
      id
      name
      email
    }
  }
}

getPostsByUser

query {
  getPostsByUser(authorId: <AUTHOR_ID>) {
    id
    title
    content
  }
}

Note: you must replace <AUTHOR_ID> with the current id of an author.

getPublishedPosts

query {
  getPublishedPosts {
    id
    title
    content
    published
    author {
      id
      name
      email
    }
  }
}

NOTE: you will get an empty array if you have not called the mutation to publish a post yet.

Mutations

signupUser

mutation {
  signupUser(
    name: "Paul"
    email: "[email protected]"
  ) {
    id
  }
}

writeDraft

mutation {
  writeDraft(
    title: "Join the Prisma Slack"
    content: "https://slack.prisma.io"
    authorId: "__AUTHOR_ID__"
  ) {
    id
    published
  }
}

publishDraft

mutation {
  publishDraft(id: __POST_ID__) {
    id
    published
  }
}

deletePost

mutation {
  deletePost(id: __POST_ID__) {
    id
    title
  }
}

Bonus

If you finished the workshop and don't know what to do until the end, you can try to:

• Use the prisma studio to manipulate your db with a web interface. Run npx prisma studio --experimental --port 3000
• Use the Nexus CRUD functions to drastically reduce your code, see the documentation
• Update the database model to add new columns and tables, and your API with it.

Authors

Paul Monnery	Naoufel Berrada	Cyril de Lajudie	Tom Chauveau

Organization

🚀 Don't hesitate to follow us on our different networks, and put a star 🌟 on PoC's repositories.