Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
(core) - Expose client.subscription shortcut method (#838)
* Export client.subscription shortcut
* Update packages/core/src/client.ts
* Update docs/api/core.md
* Apply suggestions from code review
Co-authored-by: Phil Plückthun <phil@kitten.sh>
authored by
Daniel K
Phil Plückthun
and committed by
GitHub
98b6edc2
0a399aea
+47
-5
+5
.changeset/hot-dryers-drive.md
+5
.changeset/hot-dryers-drive.md
+27
-4
docs/advanced/subscriptions.md
+27
-4
docs/advanced/subscriptions.md
···
48
48
import { Client, defaultExchanges, subscriptionExchange } from 'urql';
49
49
import { SubscriptionClient } from 'subscriptions-transport-ws';
50
50
51
-
const subscriptionClient = new SubscriptionClient(
52
-
'wss://localhost/graphql',
53
-
{ reconnect: true }
54
-
);
51
+
const subscriptionClient = new SubscriptionClient('wss://localhost/graphql', { reconnect: true });
55
52
56
53
const client = new Client({
57
54
url: '/graphql',
···
132
129
the `handleSubscription` function. This works over time, so as
133
130
new messages come in, we will append them to the list of previous
134
131
messages.
132
+
133
+
## One-off Subscriptions
134
+
135
+
Whe you're using subscriptions directly without `urql`'s framework bindings, you can use the `Client`'s `subscription` method for one-off subscriptions. This method is similar to the ones for mutations and subscriptions [that we've seen before on the "Core Package" page.](../concepts/core-package.md#one-off-queries-and-mutations)
136
+
137
+
This method will always [returns a Wonka stream](../concepts/stream-patterns.md#the-wonka-library) and doesn't have a `.toPromise()` shortcut method, since promises won't return the multiple values that a subscription may deliver. Let's convert the above example to one without framework code, as we may use subscriptions in a Node.js environment.
138
+
139
+
```js
140
+
import { pipe, subscribe } from 'wonka';
141
+
142
+
const newMessages = `
143
+
subscription MessageSub {
144
+
newMessages {
145
+
id
146
+
from
147
+
text
148
+
}
149
+
}
150
+
`;
151
+
152
+
const { unsubscribe } = pipe(
153
+
client.subscription(MessageSub),
154
+
subscribe(result => {
155
+
console.log(result); // { data: ... }
156
+
})
157
+
);
+7
-1
docs/api/core.md
+7
-1
docs/api/core.md
···
53
53
### client.executeSubscription
54
54
55
55
This is functionally the same as `client.executeQuery`, but creates operations for subscriptions
56
-
instead, with `operationName` set to `'mutation'`.
56
+
instead, with `operationName` set to `'subscription'`.
57
57
58
58
### client.executeMutation
59
59
···
102
102
103
103
[Read more about how to use this API on the "Core Package"
104
104
page.](../concepts/core-package.md#one-off-queries-and-mutations)
105
+
106
+
### client.subscription
107
+
108
+
This is similar to [`client.query`](#clientquery), but does not provide a `toPromise()` helper method on the streams it returns.
109
+
110
+
[Read more about how to use this API on the "Subscriptions" page.](../advanced/subscriptions.md)
105
111
106
112
#### client.reexecuteOperation
107
113
+8
packages/core/src/client.ts
+8
packages/core/src/client.ts
···
309
309
return response$;
310
310
};
311
311
312
+
subscription<Data = any, Variables extends object = {}>(
313
+
query: DocumentNode | string,
314
+
variables?: Variables,
315
+
context?: Partial<OperationContext>
316
+
): Source<OperationResult<Data>> {
317
+
return this.executeSubscription(createRequest(query, variables), context);
318
+
}
319
+
312
320
executeSubscription = (
313
321
query: GraphQLRequest,
314
322
opts?: Partial<OperationContext>