subscriptions

Subscriptions

This example demonstrates how to implement event-based realtime updates with GraphQL subscriptions when building a GraphQL server based on Prisma & graphql-yoga.

Get started

Note: prisma is listed as a development dependency and script in this project's package.json. This means you can invoke the Prisma CLI without having it globally installed on your machine (by prefixing it with yarn), e.g. yarn prisma deploy or yarn prisma playground. If you have the Prisma CLI installed globally (which you can do with npm install -g prisma), you can omit the yarn prefix.

1. Download the example & install dependencies

Clone the Prisma monorepo and navigate to this directory or download only this example with the following command:

curl https://codeload.github.com/graphcool/prisma/tar.gz/master | tar -xz --strip=2 prisma-master/examples/subscriptions

Next, navigate into the downloaded folder and install the NPM dependencies:

cd subscriptions
yarn install

2. Deploy the Prisma database service

You can now deploy the Prisma service (note that this requires you to have Docker installed on your machine - if that's not the case, follow the collapsed instructions below the code block):

yarn prisma deploy

I don't have Docker installed on my machine

To deploy your service to a demo server (rather than locally with Docker), please follow this link.

3. Explore the API

This example seeds some data into the database for us to explore some queries and features of the data model. Please take a look at seed.graphql for reference. Feel free to add/remove more data via mutations.

To start the server, run the following command

yarn start

The easiest way to explore this deployed service and play with the API generated from the data model is by using the GraphQL Playground.

Open a Playground

You can either start the desktop app via

yarn playground

Or you can open a Playground by navigating to http://localhost:4000 in your browser.

Run the following subscription in one tab

subscription Publications {
 publications {
  node {
   id
   title
   content
   status
  }
 }
}

Run the following mutation in another tab

mutation M {
 createPost(
  data: {
   title: "Second Post"
   content: "Second Post Content"
   status: DRAFT
   author: { connect: { handle: "prisma" } }
  }
 ) {
  id
 }
}

The first tab would have listened to use post creation event and listed the payload using web sockets.

Notice that how we are able to associate a User with this newly created post. The user was created using seed.graphql when the first deploy happened.

We are able to associate the user using their handle field as it is decorated with @unique directive.

Feel free to play around with the API.