commit 98b6edc2b806c7557d10f93b982bae3d1fd3c336 · kitten.sh/urql

+5

.changeset/hot-dryers-drive.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       '@urql/core': minor

     

       3
       3
       +
       ---

     

       4
       4
       +
       

     

       5
       5
       +
       Expose a `client.subscription`shortcut method, similar to `client.query` and `client.mutation`

+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
       51
       -
       const subscriptionClient = new SubscriptionClient(

     

       52
       52
       -
         'wss://localhost/graphql',

     

       53
       53
       -
         { reconnect: true }

     

       54
       54
       -
       );

     

       51
       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
       132
       +
       

     

       133
       133
       +
       ## One-off Subscriptions

     

       134
       134
       +
       

     

       135
       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
       136
       +
       

     

       137
       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
       138
       +
       

     

       139
       139
       +
       ```js

     

       140
       140
       +
       import { pipe, subscribe } from 'wonka';

     

       141
       141
       +
       

     

       142
       142
       +
       const newMessages = `

     

       143
       143
       +
         subscription MessageSub {

     

       144
       144
       +
           newMessages {

     

       145
       145
       +
             id

     

       146
       146
       +
             from

     

       147
       147
       +
             text

     

       148
       148
       +
           }

     

       149
       149
       +
         }

     

       150
       150
       +
       `;

     

       151
       151
       +
       

     

       152
       152
       +
       const { unsubscribe } = pipe(

     

       153
       153
       +
         client.subscription(MessageSub),

     

       154
       154
       +
         subscribe(result => {

     

       155
       155
       +
           console.log(result); // { data: ... }

     

       156
       156
       +
         })

     

       157
       157
       +
       );

+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
       56
       -
       instead, with `operationName` set to `'mutation'`.

     

       56
       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
       105
       +
       

     

       106
       106
       +
       ### client.subscription

     

       107
       107
       +
       

     

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

     

       109
       109
       +
       

     

       110
       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

···

       309
       309
        
           return response$;

     

       310
       310
        
         };

     

       311
       311
        
       

     

       312
       312
       +
         subscription<Data = any, Variables extends object = {}>(

     

       313
       313
       +
           query: DocumentNode | string,

     

       314
       314
       +
           variables?: Variables,

     

       315
       315
       +
           context?: Partial<OperationContext>

     

       316
       316
       +
         ): Source<OperationResult<Data>> {

     

       317
       317
       +
           return this.executeSubscription(createRequest(query, variables), context);

     

       318
       318
       +
         }

     

       319
       319
       +
       

     

       312
       320
        
         executeSubscription = (

     

       313
       321
        
           query: GraphQLRequest,

     

       314
       322
        
           opts?: Partial<OperationContext>