useSubscription BodyStreamBuffer was aborted

[enri90]

import { Client, cacheExchange, fetchExchange, subscriptionExchange } from 'urql';

const client = new Client({
  url: '/graphql',
  fetchSubscriptions: true,
  exchanges: [cacheExchange, fetchExchange],
});

import React from 'react';
import { useSubscription } from 'urql';

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

const handleSubscription = (messages = [], response) => {
  return [response.newMessages, ...messages];
};

const Messages = () => {
  const [res] = useSubscription({ query: newMessages }, handleSubscription);

  if (!res.data) {
    return <p>No new messages</p>;
  }

  return (
    <ul>
      {res.data.map(message => (
        <p key={message.id}>
          {message.from}: "{message.text}"
        </p>
      ))}
    </ul>
  );
};

urql.js?v=2644a334:570 Uncaught (in promise) DOMException: BodyStreamBuffer was aborted
    at http://localhost:4000/node_modules/.vite/deps/urql.js?v=2644a334:570:9
    at http://localhost:4000/node_modules/.vite/deps/chunk-JP6D27GH.js?v=2644a334:139:13
    at http://localhost:4000/node_modules/.vite/deps/chunk-JP6D27GH.js?v=2644a334:361:13
    at Array.<anonymous> (http://localhost:4000/node_modules/.vite/deps/chunk-JP6D27GH.js?v=2644a334:30:9)
    at http://localhost:4000/node_modules/.vite/deps/chunk-JP6D27GH.js?v=2644a334:203:17
    at http://localhost:4000/node_modules/.vite/deps/chunk-JP6D27GH.js?v=2644a334:30:9
    at http://localhost:4000/node_modules/.vite/deps/chunk-JP6D27GH.js?v=2644a334:40:7
    at Array.<anonymous> (http://localhost:4000/node_modules/.vite/deps/chunk-JP6D27GH.js?v=2644a334:83:15)
    at http://localhost:4000/node_modules/.vite/deps/chunk-JP6D27GH.js?v=2644a334:203:17
    at http://localhost:4000/node_modules/.vite/deps/chunk-JP6D27GH.js?v=2644a334:40:7

I don't understand what to handle this error could it be a bug?
the error appears when I change pages in the application

[shtse8]

I have the same issue. can you fix it?

[kitten]

Just double-checked with the linked example above. You're correct 👍
The error only occurs when the GraphQL API actively doesn't support subscriptions via fetch. That's a relief 😅

[shtse8]

@kitten, thank you for sharing the example. After reviewing it, I've noticed that the setup is quite straightforward and doesn't significantly differ from mine. The main difference seems to be that the example utilizes a plain Yoga server setup (createServer then listen), whereas my configuration involves a Nitro server with Yoga (createYoga then fromNodeMiddleware). This has led me to wonder about the compatibility and functionality of fetchSubscription within different server setups. Specifically, I'm trying to understand why the example's fetchSubscription approach works seamlessly with a Yoga server, and whether fetchSubscription can be utilized alongside SubscriptionExchange, or if it's a choice between using one or the other. Could you provide some insights or guidance on making fetchSubscription work with a Nitro server setup as I'm currently using?

Here is the full error when using fetchSubscription.

chunk-WYHMRHZK.js?v=5b0da496:1805 Uncaught (in promise) DOMException: BodyStreamBuffer was aborted
    at http://localhost:3000/_nuxt/@fs/home/kyle/project/node_modules/.cache/vite/client/deps/chunk-WYHMRHZK.js?v=5b0da496:1805:10
    at http://localhost:3000/_nuxt/@fs/home/kyle/project/node_modules/.cache/vite/client/deps/chunk-WYHMRHZK.js?v=5b0da496:785:13
    at http://localhost:3000/_nuxt/@fs/home/kyle/project/node_modules/.cache/vite/client/deps/chunk-WYHMRHZK.js?v=5b0da496:1007:13
    at Array.<anonymous> (http://localhost:3000/_nuxt/@fs/home/kyle/project/node_modules/.cache/vite/client/deps/chunk-WYHMRHZK.js?v=5b0da496:676:9)
    at http://localhost:3000/_nuxt/@fs/home/kyle/project/node_modules/.cache/vite/client/deps/chunk-WYHMRHZK.js?v=5b0da496:849:19
    at next (http://localhost:3000/_nuxt/@fs/home/kyle/project/node_modules/.cache/vite/client/deps/chunk-WYHMRHZK.js?v=5b0da496:1164:11)
    at Object.next (http://localhost:3000/_nuxt/@fs/home/kyle/project/node_modules/.cache/vite/client/deps/chunk-WYHMRHZK.js?v=5b0da496:1193:9)
    at nextOperation (http://localhost:3000/_nuxt/@fs/home/kyle/project/node_modules/.cache/vite/client/deps/chunk-WYHMRHZK.js?v=5b0da496:2372:10)
    at http://localhost:3000/_nuxt/@fs/home/kyle/project/node_modules/.cache/vite/client/deps/chunk-WYHMRHZK.js?v=5b0da496:2418:9
    at http://localhost:3000/_nuxt/@fs/home/kyle/project/node_modules/.cache/vite/client/deps/chunk-WYHMRHZK.js?v=5b0da496:785:13
```

[kitten]

You could also try this: http://npm.im/@graphql-yoga/plugin-graphql-sse
You shouldn't have to follow the client instructions for this either.

As per the middleware, I'm not sure what that setup looks like. As long as it's supported by the GraphQL Yoga team, maybe you could ask them what's going on?

I'd also do a quick test with curl, just to see whether it's working for sure once that's set up: https://the-guild.dev/graphql/yoga-server/docs/features/subscriptions

[shtse8]

@kitten Thanks for the suggestion regarding SSE. Upon revisiting the documentation, I realized that there are different types of subscriptions available: SSE and WS. Initially, I attempted to implement a WebSocket (WS) subscription and encountered difficulties, the specifics of which were unclear. This approach involved the fetchSubscription method provided by urql, and I was uncertain about the underlying technology it used—whether it was a form of SSE or something else.

After some trial and error, I decided to switch to using Server-Sent Events (SSE) and was successful in setting it up. Here's an overview of the changes I made to my setup, moving away from WebSocket (WS) to Server-Sent Events (SSE):

Client-side setup:

// Initially tried using WebSocket via graphql-ws, but switched to SSE.
// import { createClient as createWSClient } from 'graphql-ws';
import { createClient as createSSEClient } from 'graphql-sse';

const wsClient = createSSEClient({
  url: 'http://example.com/api/graphql',
});

...

subscriptionExchange({
  forwardSubscription(request) {
    const operation = { ...request, query: request.query || '' };
    return {
      subscribe(sink) {
        const unsubscribe = wsClient.subscribe(operation, sink);
        return { unsubscribe };
      },
    };
  }
});

Server-side setup:

import { useGraphQLSSE } from '@graphql-yoga/plugin-graphql-sse';

...

plugins: [useGraphQLSSE()]

This shift to SSE resolved the issues I was facing with WS. I'm curious about the technical differences and limitations between WS and SSE in this context, especially concerning urql's fetchSubscription. If you have any insights or additional resources on this, it would be greatly appreciated.

[kitten]

Yea, just to point this out, using the GraphQL SSE client package shouldn't be necessary.
The idea here is that urql comes with two response protocols out of the box that both can be used via HTTP/fetch and both are built-in so that no extra setup is needed.

I wouldn't be able to tell you why the multipart/mixed protocol isn't working for you. This may be something to check as it could be an incompatibility in the Web Standard to Node conversion that GraphQL Yoga does.

Again, not sure how you're setting up your API apart from this, but that's something to watch out for in general