Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Readme

GraphQL Yoga Server with Subscriptions

GraphQL Yoga from The Guild is a batteries-included cross-platform GraphQL over HTTP spec-compliant GraphQL server powered by Envelop and GraphQL Tools focused on easy setup, performance and great developer experience.

Subscriptions

Example of Subscriptions.

Usage

To access GraphiQL - the GraphQL Playground - visit the / route. That's what you see in the preview pane below.

Configuration and Documentation

See the GraphQL Yoga documentation for configuration and all the bells and whistles.

Endpoint

For this example, we'll set to / to make it easier to demo.

However, by default, the GraphQL route is configured to be on /graphql which is more common.

const yoga = createYoga({ schema, })

You can set a custom endpoint:

const yoga = createYoga({ schema, graphqlEndpoint: "/my-gql", })

Landing Page

A landing page is shown be default whenever a 404 is hit.

You can disable it via the landingPage option.

const yoga = createYoga({ schema, landingPage: false })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import { setTimeout } from "node:timers/promises";
import { createPubSub, createSchema, createYoga } from "npm:graphql-yoga";
const pubSub = createPubSub();
const typeDefs = /* GraphQL */ `
type Query {
hello: String
now: String
}
type Subscription {
countdown(from: Int!): Int!
}
type Subscription {
randomNumber: Float!
}
type Mutation {
broadcastRandomNumber: Boolean
}
`;
const resolvers = {
Query: {
hello: () => "Hello, Val Town!",
now: () => new Date().toISOString(),
},
Subscription: {
countdown: {
// This will return the value on every 1 sec until it reaches 0
subscribe: async function*(_, { from }) {
for (let i = from; i >= 0; i--) {
await setTimeout(1000);
yield { countdown: i };
}
},
},
randomNumber: {
// subscribe to the randomNumber event
subscribe: () => pubSub.subscribe("randomNumber"),
resolve: payload => payload,
},
},
Mutation: {
broadcastRandomNumber: (_, args) => {
// publish a random number
pubSub.publish("randomNumber", Math.random());
},
},
};
const defaultQuery = `#
# Welcome to Yoga GraphiQL running on Val town
#
# Yoga GraphiQL is an in-browser tool for writing, validating, and
# testing GraphQL queries.
#
# Try a GraphQL query :
#
subscription {
countdown(from: 5)
}
#
# subscription {
# randomNumber
# }
#
# which listens for a number to be broadcast by
#
# mutation {
# broadcastRandomNumber
# }
#`;
// Create a Yoga GraphQL schema
const schema = createSchema({
typeDefs,
resolvers,
});
// Create a Yoga GraphQL server
const yoga = createYoga({
schema,
graphqlEndpoint: "/",
graphiql: {
title: "GraphQL Yoga Val with Subscriptions",
defaultQuery,
},
});
export default yoga.fetch;
dthyresson-graphqlyogawithsubscriptions.web.val.run
July 28, 2024