feat(core): Update supported "Incremental Delivery" format/spec

.changeset/curly-avocados-buy.md

@@ -0,0 +1,5 @@
+---
+'@urql/core': minor
+---
+
+Update support for the "Incremental Delivery" payload specification, accepting the new `incremental` property on execution results, as per the specification. This will expand support for newer APIs implementing the more up-to-date specification.

.changeset/nine-dancers-film.md

@@ -0,0 +1,5 @@
+---
+'@urql/core': minor
+---
+
+Update default `Accept` header to include `multipart/mixed` and `application/graphql-response+json`. The former seems to now be a defactor standard-accepted indication for support of the "Incremental Delivery" GraphQL over HTTP spec addition/RFC, and the latter is an updated form of the older `Content-Type` of GraphQL responses, so both the old and new one should now be included.

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

@@ -3,23 +3,26 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "concurrently -k \"vite\" \"node server/index.js\""
+    "server:apollo": "node server/apollo-server.js",
+    "server:yoga": "node server/graphql-yoga.js",
+    "client": "vite",
+    "start": "run-p client server:yoga"
   },
   "dependencies": {
-    "@urql/core": "^2.3.0",
-    "@urql/exchange-graphcache": "^4.3.0",
-    "graphql": "15.4.0-experimental-stream-defer.1",
+    "@apollo/server": "^4.4.1",
+    "@graphql-yoga/plugin-defer-stream": "^1.7.1",
+    "@urql/core": "^3.1.1",
+    "@urql/exchange-graphcache": "^5.0.9",
+    "graphql": "17.0.0-alpha.2",
+    "graphql-yoga": "^3.7.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "urql": "^2.0.2"
+    "urql": "^3.0.3"
   },
   "devDependencies": {
-    "@polka/parse": "^1.0.0-next.0",
-    "@vitejs/plugin-react-refresh": "^1.3.3",
-    "concurrently": "^6.2.1",
-    "cors": "^2.8.5",
-    "graphql-helix": "^1.7.0",
-    "polka": "^0.5.2",
-    "vite": "^2.2.4"
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "graphql-helix": "^1.13.0",
+    "npm-run-all": "^4.1.5",
+    "vite": "^2.9.15"
   }
 }

examples/with-defer-stream-directives/server/apollo-server.js

@@ -0,0 +1,14 @@
+// NOTE: This currently fails because responses for @defer/@stream are not sent
+// as multipart responses, but the request fails silently with an empty JSON response payload
+
+const { ApolloServer } = require('@apollo/server');
+const { startStandaloneServer } = require('@apollo/server/standalone');
+const { schema } = require('./schema');
+
+const server = new ApolloServer({ schema });
+
+startStandaloneServer(server, {
+  listen: {
+    port: 3004,
+  },
+});

examples/with-defer-stream-directives/server/graphql-yoga.js

@@ -0,0 +1,13 @@
+const { createYoga } = require('graphql-yoga');
+const { useDeferStream } = require('@graphql-yoga/plugin-defer-stream');
+const { createServer } = require('http');
+const { schema } = require('./schema');
+
+const yoga = createYoga({
+  schema,
+  plugins: [useDeferStream()],
+});
+
+const server = createServer(yoga);
+
+server.listen(3004);

examples/with-defer-stream-directives/server/schema.js

@@ -0,0 +1,57 @@
+const {
+  GraphQLList,
+  GraphQLObjectType,
+  GraphQLSchema,
+  GraphQLString,
+} = require('graphql');
+
+const schema = new GraphQLSchema({
+  query: new GraphQLObjectType({
+    name: 'Query',
+    fields: () => ({
+      alphabet: {
+        type: new GraphQLList(
+          new GraphQLObjectType({
+            name: 'Alphabet',
+            fields: {
+              char: {
+                type: GraphQLString,
+              },
+            },
+          })
+        ),
+        resolve: async function* () {
+          for (let letter = 65; letter <= 90; letter++) {
+            await new Promise(resolve => setTimeout(resolve, 500));
+            yield { char: String.fromCharCode(letter) };
+          }
+        },
+      },
+      song: {
+        type: new GraphQLObjectType({
+          name: 'Song',
+          fields: () => ({
+            firstVerse: {
+              type: GraphQLString,
+              resolve: () => "Now I know my ABC's.",
+            },
+            secondVerse: {
+              type: GraphQLString,
+              resolve: () =>
+                new Promise(resolve =>
+                  setTimeout(
+                    () => resolve("Next time won't you sing with me?"),
+                    5000
+                  )
+                ),
+            },
+          }),
+        }),
+        resolve: () =>
+          new Promise(resolve => setTimeout(() => resolve('goodbye'), 1000)),
+      },
+    }),
+  }),
+});
+
+module.exports = { schema };

examples/with-defer-stream-directives/src/Songs.jsx

@@ -13,7 +13,7 @@ const SONGS_QUERY = gql`
       firstVerse
       ...secondVerseFields @defer
     }
-    alphabet @stream(initial_count: 3) {
+    alphabet @stream(initialCount: 3) {
       char
     }
   }

exchanges/multipart-fetch/src/__snapshots__/multipartFetchExchange.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`on error > returns error data 1`] = `
 {
@@ -590,13 +590,7 @@ exports[`on success > uses a file when given 1`] = `
 }
 `;
 
-exports[`on success > uses a file when given 2`] = `
-{
-  "accept": "application/graphql+json, application/json",
-}
-`;
-
-exports[`on success > uses a file when given 3`] = `FormData {}`;
+exports[`on success > uses a file when given 2`] = `FormData {}`;
 
 exports[`on success > uses multiple files when given 1`] = `
 {
@@ -737,10 +731,4 @@ exports[`on success > uses multiple files when given 1`] = `
 }
 `;
 
-exports[`on success > uses multiple files when given 2`] = `
-{
-  "accept": "application/graphql+json, application/json",
-}
-`;
-
-exports[`on success > uses multiple files when given 3`] = `FormData {}`;
+exports[`on success > uses multiple files when given 2`] = `FormData {}`;

exchanges/multipart-fetch/src/multipartFetchExchange.test.ts

@@ -82,7 +82,6 @@ describe('on success', () => {
 
     expect(data).toMatchSnapshot();
     expect(fetchOptions).toHaveBeenCalled();
-    expect(fetch.mock.calls[0][1].headers).toMatchSnapshot();
     expect(fetch.mock.calls[0][1].body).toMatchSnapshot();
   });
 
@@ -103,7 +102,6 @@ describe('on success', () => {
 
     expect(data).toMatchSnapshot();
     expect(fetchOptions).toHaveBeenCalled();
-    expect(fetch.mock.calls[0][1].headers).toMatchSnapshot();
     expect(fetch.mock.calls[0][1].body).toMatchSnapshot();
   });
 

packages/core/src/__snapshots__/client.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`createClient / Client > passes snapshot 1`] = `
 Client2 {

packages/core/src/exchanges/__snapshots__/fetch.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`on error > returns error data 1`] = `
 {

packages/core/src/exchanges/__snapshots__/subscription.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`should return response data from forwardSubscription observable 1`] = `
 {

packages/core/src/internal/__snapshots__/fetchSource.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`on error > ignores the error when a result is available 1`] = `
 {

packages/core/src/internal/fetchOptions.ts

@@ -57,7 +57,8 @@ export const makeFetchOptions = (
   const useGETMethod =
     operation.kind === 'query' && !!operation.context.preferGetMethod;
   const headers: HeadersInit = {
-    accept: 'application/graphql+json, application/json',
+    accept:
+      'multipart/mixed, application/graphql-response+json, application/graphql+json, application/json',
   };
   if (!useGETMethod) headers['content-type'] = 'application/json';
   const extraOptions =