commit 65be20d55a83730088f08f3362e353517d9f6fe3 · kitten.sh/urql

+5

.changeset/few-snails-burn.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       '@urql/core': patch

     

       3
       3
       +
       ---

     

       4
       4
       +
       

     

       5
       5
       +
       Add missing `fetchSubscriptions` entry to `OperationContext`. The Client’s `fetchSubscriptions` now works properly and can be used to execute subscriptions as multipart/event-stream requests.

+5

.changeset/lazy-needles-give.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       '@urql/core': patch

     

       3
       3
       +
       ---

     

       4
       4
       +
       

     

       5
       5
       +
       Fix `fetchSource` not working for subscriptions since `hasNext` isn’t necessarily set.

+1 -1

examples/with-defer-stream-directives/README.md

···

       17
       17
        
       This example contains:

     

       18
       18
        
       

     

       19
       19
        
       - The `urql` bindings and a React app with a client set up in [`src/App.jsx`](src/App.jsx)

     

       20
       20
       -
       - A local `polka` server set up to test deferred and streamed results in [`server/`](server/).

     

       20
       20
       +
       - A local `graphql-yoga` server set up to test deferred and streamed results in [`server/`](server/).

-1

examples/with-defer-stream-directives/package.json

···

       27
       27
        
         "devDependencies": {

     

       28
       28
        
           "@apollo/server": "^4.4.1",

     

       29
       29
        
           "@vitejs/plugin-react": "^3.1.0",

     

       30
       30
       -
           "graphql-helix": "^1.13.0",

     

       31
       30
        
           "graphql-yoga": "^3.7.1",

     

       32
       31
        
           "npm-run-all": "^4.1.5",

     

       33
       32
        
           "vite": "^4.2.0"

+25

examples/with-subscriptions-via-fetch/README.md

···

       1
       1
       +
       # With Subscriptions via Fetch

     

       2
       2
       +
       

     

       3
       3
       +
       This example shows `urql` in use with subscriptions running via a plain `fetch`

     

       4
       4
       +
       HTTP request to GraphQL Yoga. This uses the [GraphQL Server-Sent

     

       5
       5
       +
       Events](https://the-guild.dev/blog/graphql-over-sse) protocol, which means that

     

       6
       6
       +
       the request streams in more results via a single HTTP response.

     

       7
       7
       +
       

     

       8
       8
       +
       This example also includes Graphcache ["Cache

     

       9
       9
       +
       Updates"](https://formidable.com/open-source/urql/docs/graphcache/cache-updates/)

     

       10
       10
       +
       to update a list with incoming items from the subscriptions.

     

       11
       11
       +
       

     

       12
       12
       +
       To run this example install dependencies and run the `start` script:

     

       13
       13
       +
       

     

       14
       14
       +
       ```sh

     

       15
       15
       +
       yarn install

     

       16
       16
       +
       yarn run start

     

       17
       17
       +
       # or

     

       18
       18
       +
       npm install

     

       19
       19
       +
       npm run start

     

       20
       20
       +
       ```

     

       21
       21
       +
       

     

       22
       22
       +
       This example contains:

     

       23
       23
       +
       

     

       24
       24
       +
       - The `urql` bindings and a React app with a client set up in [`src/App.jsx`](src/App.jsx)

     

       25
       25
       +
       - A local `graphql-yoga` server set up to test subscriptions in [`server/`](server/).

+27

examples/with-subscriptions-via-fetch/index.html

···

       1
       1
       +
       <!DOCTYPE html>

     

       2
       2
       +
       <html lang="en">

     

       3
       3
       +
         <head>

     

       4
       4
       +
           <meta charset="UTF-8" />

     

       5
       5
       +
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     

       6
       6
       +
           <title>with-defer-stream-directives</title>

     

       7
       7
       +
           <style>

     

       8
       8
       +
             body {

     

       9
       9
       +
               margin: 0;

     

       10
       10
       +
               font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',

     

       11
       11
       +
                 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',

     

       12
       12
       +
                 'Helvetica Neue', sans-serif;

     

       13
       13
       +
               -webkit-font-smoothing: antialiased;

     

       14
       14
       +
               -moz-osx-font-smoothing: grayscale;

     

       15
       15
       +
             }

     

       16
       16
       +
       

     

       17
       17
       +
             code {

     

       18
       18
       +
               font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',

     

       19
       19
       +
                 monospace;

     

       20
       20
       +
             }

     

       21
       21
       +
           </style>

     

       22
       22
       +
         </head>

     

       23
       23
       +
         <body>

     

       24
       24
       +
           <div id="root"></div>

     

       25
       25
       +
           <script type="module" src="/src/index.jsx"></script>

     

       26
       26
       +
         </body>

     

       27
       27
       +
       </html>

+24

examples/with-subscriptions-via-fetch/package.json

···

       1
       1
       +
       {

     

       2
       2
       +
         "name": "with-subscriptions-via-fetch",

     

       3
       3
       +
         "version": "0.0.0",

     

       4
       4
       +
         "private": true,

     

       5
       5
       +
         "scripts": {

     

       6
       6
       +
           "server": "node server/graphql-yoga.js",

     

       7
       7
       +
           "client": "vite",

     

       8
       8
       +
           "start": "run-p client server"

     

       9
       9
       +
         },

     

       10
       10
       +
         "dependencies": {

     

       11
       11
       +
           "@urql/core": "^4.0.9",

     

       12
       12
       +
           "@urql/exchange-graphcache": "^6.1.1",

     

       13
       13
       +
           "graphql": "^16.6.0",

     

       14
       14
       +
           "react": "^18.2.0",

     

       15
       15
       +
           "react-dom": "^18.2.0",

     

       16
       16
       +
           "urql": "^4.0.3"

     

       17
       17
       +
         },

     

       18
       18
       +
         "devDependencies": {

     

       19
       19
       +
           "@vitejs/plugin-react": "^3.1.0",

     

       20
       20
       +
           "graphql-yoga": "^3.7.1",

     

       21
       21
       +
           "npm-run-all": "^4.1.5",

     

       22
       22
       +
           "vite": "^4.2.0"

     

       23
       23
       +
         }

     

       24
       24
       +
       }

+7

examples/with-subscriptions-via-fetch/server/graphql-yoga.js

···

       1
       1
       +
       const { createYoga } = require('graphql-yoga');

     

       2
       2
       +
       const { createServer } = require('http');

     

       3
       3
       +
       const { schema } = require('./schema');

     

       4
       4
       +
       

     

       5
       5
       +
       const yoga = createYoga({ schema });

     

       6
       6
       +
       const server = createServer(yoga);

     

       7
       7
       +
       server.listen(3004);

+48

examples/with-subscriptions-via-fetch/server/schema.js

···

       1
       1
       +
       const {

     

       2
       2
       +
         GraphQLList,

     

       3
       3
       +
         GraphQLObjectType,

     

       4
       4
       +
         GraphQLSchema,

     

       5
       5
       +
         GraphQLString,

     

       6
       6
       +
       } = require('graphql');

     

       7
       7
       +
       

     

       8
       8
       +
       const Alphabet = new GraphQLObjectType({

     

       9
       9
       +
         name: 'Alphabet',

     

       10
       10
       +
         fields: {

     

       11
       11
       +
           char: {

     

       12
       12
       +
             type: GraphQLString,

     

       13
       13
       +
           },

     

       14
       14
       +
         },

     

       15
       15
       +
       });

     

       16
       16
       +
       

     

       17
       17
       +
       const schema = new GraphQLSchema({

     

       18
       18
       +
         query: new GraphQLObjectType({

     

       19
       19
       +
           name: 'Query',

     

       20
       20
       +
           fields: () => ({

     

       21
       21
       +
             list: {

     

       22
       22
       +
               type: new GraphQLList(Alphabet),

     

       23
       23
       +
               resolve() {

     

       24
       24
       +
                 return [{ char: 'Where are my letters?' }];

     

       25
       25
       +
               },

     

       26
       26
       +
             },

     

       27
       27
       +
           }),

     

       28
       28
       +
         }),

     

       29
       29
       +
         subscription: new GraphQLObjectType({

     

       30
       30
       +
           name: 'Subscription',

     

       31
       31
       +
           fields: () => ({

     

       32
       32
       +
             alphabet: {

     

       33
       33
       +
               type: Alphabet,

     

       34
       34
       +
               resolve(root) {

     

       35
       35
       +
                 return root;

     

       36
       36
       +
               },

     

       37
       37
       +
               subscribe: async function* () {

     

       38
       38
       +
                 for (let letter = 65; letter <= 90; letter++) {

     

       39
       39
       +
                   await new Promise(resolve => setTimeout(resolve, 500));

     

       40
       40
       +
                   yield { char: String.fromCharCode(letter) };

     

       41
       41
       +
                 }

     

       42
       42
       +
               },

     

       43
       43
       +
             },

     

       44
       44
       +
           }),

     

       45
       45
       +
         }),

     

       46
       46
       +
       });

     

       47
       47
       +
       

     

       48
       48
       +
       module.exports = { schema };

+37

examples/with-subscriptions-via-fetch/src/App.jsx

···

       1
       1
       +
       import React from 'react';

     

       2
       2
       +
       import { Client, Provider, fetchExchange } from 'urql';

     

       3
       3
       +
       

     

       4
       4
       +
       import { cacheExchange } from '@urql/exchange-graphcache';

     

       5
       5
       +
       

     

       6
       6
       +
       import Songs from './Songs';

     

       7
       7
       +
       

     

       8
       8
       +
       const cache = cacheExchange({

     

       9
       9
       +
         keys: {

     

       10
       10
       +
           Alphabet: data => data.char,

     

       11
       11
       +
         },

     

       12
       12
       +
         updates: {

     

       13
       13
       +
           Subscription: {

     

       14
       14
       +
             alphabet(parent, _args, cache) {

     

       15
       15
       +
               const list = cache.resolve('Query', 'list') || [];

     

       16
       16
       +
               list.push(parent.alphabet);

     

       17
       17
       +
               cache.link('Query', 'list', list);

     

       18
       18
       +
             },

     

       19
       19
       +
           },

     

       20
       20
       +
         },

     

       21
       21
       +
       });

     

       22
       22
       +
       

     

       23
       23
       +
       const client = new Client({

     

       24
       24
       +
         url: 'http://localhost:3004/graphql',

     

       25
       25
       +
         fetchSubscriptions: true,

     

       26
       26
       +
         exchanges: [cache, fetchExchange],

     

       27
       27
       +
       });

     

       28
       28
       +
       

     

       29
       29
       +
       function App() {

     

       30
       30
       +
         return (

     

       31
       31
       +
           <Provider value={client}>

     

       32
       32
       +
             <Songs />

     

       33
       33
       +
           </Provider>

     

       34
       34
       +
         );

     

       35
       35
       +
       }

     

       36
       36
       +
       

     

       37
       37
       +
       export default App;

+59

examples/with-subscriptions-via-fetch/src/Songs.jsx

···

       1
       1
       +
       import React from 'react';

     

       2
       2
       +
       import { gql, useQuery, useSubscription } from 'urql';

     

       3
       3
       +
       

     

       4
       4
       +
       const LIST_QUERY = gql`

     

       5
       5
       +
         query List_Query {

     

       6
       6
       +
           list {

     

       7
       7
       +
             char

     

       8
       8
       +
           }

     

       9
       9
       +
         }

     

       10
       10
       +
       `;

     

       11
       11
       +
       

     

       12
       12
       +
       const SONG_SUBSCRIPTION = gql`

     

       13
       13
       +
         subscription App_Subscription {

     

       14
       14
       +
           alphabet {

     

       15
       15
       +
             char

     

       16
       16
       +
           }

     

       17
       17
       +
         }

     

       18
       18
       +
       `;

     

       19
       19
       +
       

     

       20
       20
       +
       const ListQuery = () => {

     

       21
       21
       +
         const [listResult] = useQuery({

     

       22
       22
       +
           query: LIST_QUERY,

     

       23
       23
       +
         });

     

       24
       24
       +
         return (

     

       25
       25
       +
           <div>

     

       26
       26
       +
             <h3>List</h3>

     

       27
       27
       +
             {listResult?.data?.list.map(i => (

     

       28
       28
       +
               <div key={i.char}>{i.char}</div>

     

       29
       29
       +
             ))}

     

       30
       30
       +
           </div>

     

       31
       31
       +
         );

     

       32
       32
       +
       };

     

       33
       33
       +
       

     

       34
       34
       +
       const SongSubscription = () => {

     

       35
       35
       +
         const [songsResult] = useSubscription(

     

       36
       36
       +
           { query: SONG_SUBSCRIPTION },

     

       37
       37
       +
           (prev = [], data) => [...prev, data.alphabet]

     

       38
       38
       +
         );

     

       39
       39
       +
       

     

       40
       40
       +
         return (

     

       41
       41
       +
           <div>

     

       42
       42
       +
             <h3>Song</h3>

     

       43
       43
       +
             {songsResult?.data?.map(i => (

     

       44
       44
       +
               <div key={i.char}>{i.char}</div>

     

       45
       45
       +
             ))}

     

       46
       46
       +
           </div>

     

       47
       47
       +
         );

     

       48
       48
       +
       };

     

       49
       49
       +
       

     

       50
       50
       +
       const LocationsList = () => {

     

       51
       51
       +
         return (

     

       52
       52
       +
           <>

     

       53
       53
       +
             <ListQuery />

     

       54
       54
       +
             <SongSubscription />

     

       55
       55
       +
           </>

     

       56
       56
       +
         );

     

       57
       57
       +
       };

     

       58
       58
       +
       

     

       59
       59
       +
       export default LocationsList;

+6

examples/with-subscriptions-via-fetch/src/index.jsx

···

       1
       1
       +
       import React from 'react';

     

       2
       2
       +
       import { createRoot } from 'react-dom/client';

     

       3
       3
       +
       

     

       4
       4
       +
       import App from './App';

     

       5
       5
       +
       

     

       6
       6
       +
       createRoot(document.getElementById('root')).render(<App />);

+7

examples/with-subscriptions-via-fetch/vite.config.js

···

       1
       1
       +
       import { defineConfig } from 'vite';

     

       2
       2
       +
       import react from '@vitejs/plugin-react';

     

       3
       3
       +
       

     

       4
       4
       +
       // https://vitejs.dev/config/

     

       5
       5
       +
       export default defineConfig({

     

       6
       6
       +
         plugins: [react()],

     

       7
       7
       +
       });

+1

packages/core/src/client.ts

···

       568
       568
        
       

     

       569
       569
        
         const baseOpts = {

     

       570
       570
        
           url: opts.url,

     

       571
       571
       +
           fetchSubscriptions: opts.fetchSubscriptions,

     

       571
       572
        
           fetchOptions: opts.fetchOptions,

     

       572
       573
        
           fetch: opts.fetch,

     

       573
       574
        
           preferGetMethod: !!opts.preferGetMethod,

+4 -4

packages/core/src/internal/fetchSource.ts

···

       64
       64
        
             } catch (error) {

     

       65
       65
        
               if (!payload) throw error;

     

       66
       66
        
             }

     

       67
       67
       -
             if (payload && !payload.hasNext) break;

     

       67
       67
       +
             if (payload && payload.hasNext === false) break;

     

       68
       68
        
           }

     

       69
       69
        
         }

     

       70
       70
       -
         if (payload && payload.hasNext) {

     

       70
       70
       +
         if (payload && payload.hasNext !== false) {

     

       71
       71
        
           yield { hasNext: false };

     

       72
       72
        
         }

     

       73
       73
        
       }

     
···

       95
       95
        
           } catch (error) {

     

       96
       96
        
             if (!payload) throw error;

     

       97
       97
        
           }

     

       98
       98
       -
           if (payload && !payload.hasNext) break;

     

       98
       98
       +
           if (payload && payload.hasNext === false) break;

     

       99
       99
        
         }

     

       100
       100
       -
         if (payload && payload.hasNext) {

     

       100
       100
       +
         if (payload && payload.hasNext !== false) {

     

       101
       101
        
           yield { hasNext: false };

     

       102
       102
        
         }

     

       103
       103
        
       }