Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(core) - Expose client.subscription shortcut method #838

Merged
merged 4 commits into from
May 26, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/hot-dryers-drive.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@urql/core': minor
---

Expose a `client.subscription`shortcut method, similar to `client.query` and `client.mutation`
31 changes: 27 additions & 4 deletions docs/advanced/subscriptions.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,7 @@ package](https://github.com/apollographql/subscriptions-transport-ws).
import { Client, defaultExchanges, subscriptionExchange } from 'urql';
import { SubscriptionClient } from 'subscriptions-transport-ws';

const subscriptionClient = new SubscriptionClient(
'wss://localhost/graphql',
{ reconnect: true }
);
const subscriptionClient = new SubscriptionClient('wss://localhost/graphql', { reconnect: true });

const client = new Client({
url: '/graphql',
Expand Down Expand Up @@ -132,3 +129,29 @@ As we can see, the `result.data` is being updated and transformed by
the `handleSubscription` function. This works over time, so as
new messages come in, we will append them to the list of previous
messages.

## One-off Subscriptions

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)

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.

```js
import { pipe, subscribe } from 'wonka';

const newMessages = `
subscription MessageSub {
newMessages {
id
from
text
}
}
`;

const { unsubscribe } = pipe(
client.subscription(MessageSub),
subscribe(result => {
console.log(result); // { data: ... }
})
);
8 changes: 7 additions & 1 deletion docs/api/core.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ repeatedly in the interval you pass.
### client.executeSubscription

This is functionally the same as `client.executeQuery`, but creates operations for subscriptions
instead, with `operationName` set to `'mutation'`.
instead, with `operationName` set to `'subscription'`.

### client.executeMutation

Expand Down Expand Up @@ -103,6 +103,12 @@ This is similar to [`client.query`](#clientquery), but dispatches mutations inst
[Read more about how to use this API on the "Core Package"
page.](../concepts/core-package.md#one-off-queries-and-mutations)

### client.subscription

This is similar to [`client.query`](#clientquery), but does not provide a `toPromise()` helper method on the streams it returns.

[Read more about how to use this API on the "Subscriptions" page.](../advanced/subscriptions.md)

#### client.reexecuteOperation

This method is commonly used in _Exchanges_ to reexecute an [`Operation`](#operation) on the
Expand Down
8 changes: 8 additions & 0 deletions packages/core/src/client.ts
Original file line number Diff line number Diff line change
Expand Up @@ -309,6 +309,14 @@ export class Client {
return response$;
};

subscription<Data = any, Variables extends object = {}>(
query: DocumentNode | string,
variables?: Variables,
context?: Partial<OperationContext>
): Source<OperationResult<Data>> {
return this.executeSubscription(createRequest(query, variables), context);
}

executeSubscription = (
query: GraphQLRequest,
opts?: Partial<OperationContext>
Expand Down