Graphql-ws implementation error in nextjs?

[siamahnaf]

Hello, I see the documentation and try to do this for applying graphql-ws into nextjs.

client.ts-

import { createClient as createWSClient } from "graphql-ws";
import { cacheExchange, Client, fetchExchange, ssrExchange, errorExchange, subscriptionExchange } from "urql";

const wsClient = createWSClient({
    url: "ws://localhost:3001/ecampus" as string,
})

client = new Client({
            url: process.env.NEXT_PUBLIC_API_URL as string,
            exchanges: [
                errorExchange({
                    onError: (error) => {
                        error.message = error.message.replace(/^\[.*\]\s*/, "");
                    }
                }),
                cacheExchange,
                ssrCache,
                fetchExchange,
                subscriptionExchange({
                    forwardSubscription(request) {
                        const input = { ...request, query: request.query || '' };
                        return {
                            subscribe(sink) {
                                const unsubscribe = wsClient.subscribe(input, sink);
                                return { unsubscribe };
                            },
                        };
                    },
                }),
            ],
            fetchOptions: {
                credentials: "include"
            },
  });

But I am getting-

Error: WebSocket implementation missing; on Node you can "import WebSocket from 'ws';" and pass "webSocketImpl: WebSocket" to "createClient"

Then I search and get idea for doing this-

const wsClient = typeof window !== "undefined" ? createWSClient({ url: "ws://localhost:3001/ecampus" as string, }) : null;

And-

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

but here in this line forwardSubscription I am getting a type error-

Type '(() => void) | undefined' is not assignable to type '() => void'. Type 'undefined' is not assignable to type '() => void'

What is the proper way for applying graphql-ws into nextjs with urql

[kitten]

You'll have to check the graphql-ws docs. Basically, you can add the polyfill if you need the transport server-side

If you're only using it for subscriptions however, I doubt that you'll need it.

As the types say, you can't just null out parts of the API you're using and will instead have to exclude the entire subscriptionExchange on the server-side from your exchanges array, if it's not supposed to run on the server-side

[siamahnaf]

Sorry, It is hard to understand. Please clearfy more little bit?

Updated: I don't need transport into server side. I am using subscription for real time data fetching when ui is ready to explore.

[kitten]

tl;dr, don't do this:

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

That'll make unsubscribe undefined when wsClient is undefined, and TypeScript will (rightfully) yell at you, as you've seen.

Instead, exclude the entire exchange if you don't need it, e.g.:

client = new Client({
  // ...
  exchanges: [
    // ...
    wsClient ? subscriptionExchange({
        forwardSubscription(request) {
            const input = { ...request, query: request.query || '' };
            return {
                subscribe(sink) {
                    const unsubscribe = wsClient.subscribe(input, sink);
                    return { unsubscribe };
                },
            };
        },
    }) : null,
    // ...
  ].filter(Boolean),
});

[siamahnaf]

Thank you. That means it is the proper way. Additionally thank for giving solve for my error.

Best wishes for you.

[velidan]

Cool, thank you Kitten