GraphQL subscriptions hooks Example

Check the example

Configuration

The best way to understand how to use subscriptions hooks is to play with the configuration.

Let's start with the wundergraph.config.ts file, and configure the data source:

1
2
3
4
5
6
7
8
9
10
const counter = introspect.graphql({
id: 'counter',
apiNamespace: 'ws',
loadSchemaFromString: schema,
url: 'http://localhost:4000/graphql',
});
configureWunderGraphApplication({
apis: [counter],
});

Now let's configure the hooks in the wundergraph.server.ts file:

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
// wundergraph.server.ts
export default configureWunderGraphServer(() => ({
hooks: {
global: {
wsTransport: {
onConnectionInit: {
// counter is the id of the introspected api (data source id), defined in the wundergraph.config.ts
enableForDataSources: ['counter'],
hook: async (hook) => {
let token = hook.clientRequest.headers.get('Authorization') || '';
// we can have a different logic for each data source
if (hook.dataSourceId === 'counter') {
token = 'secret';
}
return {
// this payload will be passed to the ws `connection_init` message payload
// {"type": "connection_init", "payload": {"Authorization": "secret"}}
payload: {
Authorization: token,
},
};
},
},
},
},
queries: {},
mutations: {},
subscriptions: {
// .wundergraph/operations/Ws.graphql
Ws: {
mutatingPreResolve: async (hook) => {
// here we modify the input before request is sent to the data source
hook.input.from = 7;
return hook.input;
},
postResolve: async (hook) => {
// here we log the response we got from the ws server (not the modified one)
hook.log.info(`postResolve hook: ${hook.response.data!.ws_countdown}`);
},
mutatingPostResolve: async (hook) => {
// here we modify the response before it gets sent to the client
let count = hook.response.data!.ws_countdown!;
count++;
hook.response.data!.ws_countdown = count;
return hook.response;
},
preResolve: async (hook) => {
// here we log the request input
/**
* // .wundergraph/operations/Ws.graphql
* subscription($from: Int!) {
* ws_countdown(from: $from)
* }
*/
hook.log.info(`preResolve hook input, counter starts from: ${hook.input.from}`);
},
},
},
},
graphqlServers: [],
}));

Getting started

1
npm install && npm start

Check results

1
curl -N http://localhost:9991/operations/Ws\?from\=5
  • Check the output.
  • Check the logs to see the hooks being executed.

Learn more

Deploy to WunderGraph Cloud

The easiest way to deploy your WunderGraph app is to use WunderGraph Cloud.

Deploy to WunderGraph

Was this article helpful to you?
Provide feedback

Edit this page