fix(url-loader): use multipart/mixed in accept if operationAst has de…

…fer or stream directives (#4655)

* fix(url-loader): use multipart/mixed in accept if operationAst ha
s defer or stream directives

* Add test

.changeset/metal-tips-invite.md

@@ -0,0 +1,5 @@
+---
+'@graphql-tools/url-loader': patch
+---
+
+Fix defer/stream multipart response support

packages/loaders/url/src/index.ts

@@ -1,6 +1,13 @@
 /* eslint-disable no-case-declarations */
 /// <reference lib="dom" />
-import { print, IntrospectionOptions, GraphQLError, buildASTSchema, buildSchema } from 'graphql';
+import {
+  print,
+  IntrospectionOptions,
+  GraphQLError,
+  buildASTSchema,
+  buildSchema,
+  OperationDefinitionNode,
+} from 'graphql';
 
 import {
   AsyncExecutor,
@@ -319,6 +326,12 @@ export class UrlLoader implements Loader<LoadFromUrlOptions> {
       if (operationType === 'subscription' || isLiveQueryOperationDefinitionNode(operationAst)) {
         method = 'GET';
         accept = 'text/event-stream';
+      } else if (
+        (operationAst as OperationDefinitionNode).directives?.some(
+          ({ name }) => name.value === 'defer' || name.value === 'stream'
+        )
+      ) {
+        accept += ', multipart/mixed';
       }
 
       const endpoint = request.extensions?.endpoint || HTTP_URL;

packages/loaders/url/tests/helix-yoga-compat.spec.ts

@@ -48,7 +48,9 @@ describe('helix/yoga compat', () => {
     ];
     const serverPort = 1335;
     const serverHost = 'http://localhost:' + serverPort;
-    httpServer = http.createServer((_, res) => {
+    let receivedAcceptHeader: string | undefined;
+    httpServer = http.createServer((req, res) => {
+      receivedAcceptHeader = req.headers['accept'];
       res.writeHead(200, {
         // prettier-ignore
         "Connection": "keep-alive",
@@ -92,6 +94,7 @@ describe('helix/yoga compat', () => {
       expect(data).toEqual(expectedDatas.shift()!);
     }
     expect(expectedDatas.length).toBe(0);
+    expect(receivedAcceptHeader).toBe('application/json');
   });
 
   it('should handle SSE subscription result', async () => {