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

1. Install the Prisma CLI

The prisma cli is the core component of your development workflow. prisma should be installed as a global dependency, you can install this with npm install -g prisma

2. 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/prismagraphql/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

3. 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):

# Ensure docker is running the server's dependencies
docker-compose up
# Deploy the server
cd prisma
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.

4. 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.