GraphQL Server with Realtime Subscriptions Example

This example shows how to implement GraphQL server with realtime subscriptions based on Prisma & graphql-yoga.

How to use

1. Download example & install dependencies

Clone the repository:

git clone [email protected]:prisma/prisma-examples.git

Install Node dependencies:

cd prisma-examples/typescript/graphql-subscriptions
npm install

2. Install the Prisma CLI

To run the example, you need the Prisma CLI. Please install it via NPM or using another method:

npm install -g prisma

3. Set up database & deploy Prisma datamodel

For this example, you'll use a free demo database (AWS Aurora) hosted in Prisma Cloud. To set up your database, run:

prisma deploy

Then, follow these steps in the interactive CLI wizard:

1. Select Demo server
2. Authenticate with Prisma Cloud in your browser (if necessary)
3. Back in your terminal, confirm all suggested values

Alternative: Run Prisma locally via Docker

1. Ensure you have Docker installed on your machine. If not, you can get it from here.
2. Create docker-compose.yml for MySQL (see here for Postgres):

   version: '3'
   services:
     prisma:
       image: prismagraphql/prisma:1.27
       restart: always
       ports:
       - "4466:4466"
       environment:
         PRISMA_CONFIG: |
           port: 4466
           databases:
             default:
               connector: mysql
               host: mysql
               port: 3306
               user: root
               password: prisma
               migrations: true
     mysql:
       image: mysql:5.7
       restart: always
       environment:
         MYSQL_ROOT_PASSWORD: prisma
       volumes:
         - mysql:/var/lib/mysql
   volumes:
     mysql:

3. Run docker-compose up -d
4. Set the endpoint in prisma.yml to http://localhost:4466
5. Run prisma deploy

4. Start the GraphQL server

Launch your GraphQL server with this command:

npm run start

Navigate to http://localhost:4000 in your browser to explore the API of your GraphQL server in a GraphQL Playground.

5. Using the GraphQL API

The schema that specifies the API operations of your GraphQL server is defined in ./src/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

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

See more API operations

Register a new user

You can send the following mutation in the Playground to sign up a new user and retrieve an authentication token for them:

mutation {
  signup(name: "Alice", email: "[email protected]", password: "graphql") {
    token
  }
}

Log in an existing user

This mutation will log in an existing user by requesting a new authentication token for them:

mutation {
  login(email: "[email protected]", password: "graphql") {
    token
  }
}

Check whether a user is currently logged in with the me query

For this query, you need to make sure a valid authentication token is sent along with the Bearer-prefix in the Authorization header of the request. Inside the Playground, you can set HTTP headers in the bottom-left corner:

Once you've set the header, you can send the following query to check whether the token is valid:

{
  me {
    id
    name
    email
  }
}

Create a new draft

You need to be logged in for this query to work, i.e. an authentication token that was retrieved through a signup or login mutation needs to be added to the Authorization header in the GraphQL Playground.

mutation {
  createDraft(
    title: "Join the Prisma Slack"
    content: "https://slack.prisma.io"
    authorEmail: "[email protected]"
  ) {
    id
    published
  }
}

Publish an existing draft

You need to be logged in for this query to work, i.e. an authentication token that was retrieved through a signup or login mutation needs to be added to the Authorization header in the GraphQL Playground. The authentication token must belong to the user who created the post.

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

You need to be logged in for this query to work, i.e. an authentication token that was retrieved through a signup or login mutation needs to be added to the Authorization header in the GraphQL Playground.

{
  filterPosts(searchString: "graphql") {
    id
    title
    content
    published 
    author {
      id
      name
      email
    }
  }
}

Retrieve a single post

You need to be logged in for this query to work, i.e. an authentication token that was retrieved through a signup or login mutation needs to be added to the Authorization header in the GraphQL Playground.

{
  posts(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

You need to be logged in for this query to work, i.e. an authentication token that was retrieved through a signup or login mutation needs to be added to the Authorization header in the GraphQL Playground. The authentication token must belong to the user who created the post.

mutation {
  deletePost(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.

6. Testing GraphQL subscriptions in the Playground

To test the post subscription, you need to send a subscription query in the Playground, e.g.:

subscription {
  posts {
    id
    createdAt
    title
    content
    published
  }
}

When hitting the Play-button, you won't see an immediate response. Instead there's a loading indicator in the response pane of the Playground:

Now, whenever a post is created (or updated), e.g. with this mutation (you can run it in another tab):

mutation {
  createDraft(
    title: "Join the Prisma community on Slack"
    content: "https://slack.prisma.io"
  ) {
    id
  }
}

You will see the results appear in the tab where the subscription is running:

Next steps

• Use Prisma with an existing database
• Explore the Prisma client API
• Learn more about the GraphQL schema