How is the connection between React and graphql-ws

[hichamlehouedj]

Is there any example of using the graphql-ws in React

I searched a lot and didn't find any solution

[enisdenjo]

Most of the time you use one of the showcased libraries (Relay, Apollo, Urlq) with React. But, here's a quick and simple example using hooks:

import React, { useEffect, useState } from 'react';
import { createClient } from 'graphql-ws';

const client = createClient({
  url: 'ws://react.over.ws/graphql',
});

export function useGraphQLWS(payload) {
  const [{ value, error, done }, setState] = useState({
    value: undefined,
    error: undefined,
    done: false,
  });

  useEffect(() => {
    const unsubscribe = client.subscribe(payload, {
      next: (value) => setState((state) => ({ ...state, value, done: false })),
      error: (error) => setState((state) => ({ ...state, error, done: true })),
      complete: () => setState((state) => ({ ...state, done: true })),
    });
    return () => unsubscribe();
  }, [payload]);

  if (error) throw error;
  return { value, done };
}

[8ctopotamus]

Thank you for posting this example hook! It is exactly what I was looking for in order understand how GraphQL-WS client works without any extra libraries (Apollo, Relay, etc...)!

[enisdenjo]

Glad to hear that @8ctopotamus! Would you like to create a PR to add a recipe for "Client usage in React" using this example? 😄

[hichamlehouedj]

@enisdenjo
It worked correctly on the local server level but it does not work on cpanel it returns the following error:
WebSocket connection to 'ws://example.com/graphql' failed

I think the problem is in the .htaccess file.

mod_rewrite:

RewriteEngine on
RewriteRule ^(.*) http://localhost:4000/$1 [P]
RewriteCond %{HTTP:UPGRADE} ^WebSocket$ [NC]
RewriteCond %{HTTP:CONNECTION} \bUpgrade\b [NC]
RewriteRule .* ws://localhost:4000%{REQUEST_URI} [P,QSA,L]

[enisdenjo]

I am not very familiar with cPanel, but you can try the following in your .htaccess.

Your RewriteCond matches Upgrade: WebSocket case-sensitively, but (for example) Chrome sends Upgrade: websocket. Try using case-insensitive rules:

From StackOverflow

RewriteCond %{HTTP:Connection} Upgrade [NC]
RewriteCond %{HTTP:Upgrade} websocket [NC]
RewriteRule /(.*) ws://localhost:4000/$1  [P,L]