GraphQL SSE React Native Subscription is not working.

[CrispenGari]

I'm using the urql implementation to with graphql-sse to create a graphql client as follows:

import {
  Client,
  cacheExchange,
  fetchExchange,
  subscriptionExchange,
} from "urql";
import { KEYS, serverDomain } from "../constants";
import { del, retrieve } from "../utils";
import { createClient as createSSEClient } from "graphql-sse";
import { authExchange } from "@urql/exchange-auth";
import { getToken, setToken } from "../state/token";

const sseClient = createSSEClient({
  url: `http://${serverDomain}/graphql`,
});
export const client = new Client({
  url: `http://${serverDomain}/graphql`,
  requestPolicy: "network-only",
  exchanges: [
    cacheExchange,
    fetchExchange,
    authExchange(async (utils) => {
      const jwt = await retrieve(KEYS.TOKEN_KEY);
      setToken(jwt);
      return {
        addAuthToOperation(operation) {
          if (jwt) {
            return utils.appendHeaders(operation, {
              Authorization: `Bearer ${jwt}`,
            });
          }
          return operation;
        },
        willAuthError(_operation) {
          return !jwt;
        },
        didAuthError(error, _operation) {
          return error.graphQLErrors.some(
            (e) => e.extensions?.code === "FORBIDDEN"
          );
        },
        async refreshAuth() {
          setToken(null);
          await del(KEYS.TOKEN_KEY);
        },
      };
    }),
    subscriptionExchange({
      forwardSubscription(operation) {
        return {
          subscribe: (sink) => {
            const dispose = sseClient.subscribe(operation as any, sink);
            return {
              unsubscribe: dispose,
            };
          },
        };
      },
    }),
  ],
  fetchOptions: () => {
    const token = getToken();
    return {
      headers: { authorization: `Bearer ${token || ""}` },
    };
  },
});

Then when try to use the useSubscription hook as follows to listen to new incoming subscriptions in my component as follows:

import { COLORS, FONTS } from "../../constants";
import { AppParamList } from "../../params";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { HomeStack } from "./home";
import { FriendsStack } from "./friends";
import { NotificationsStack } from "./notifications";
import { SettingsStack } from "./settings";
import TabIcon from "../../components/TabIcon/TabIcon";
import {
  MaterialCommunityIcons,
  MaterialIcons,
  Ionicons,
} from "@expo/vector-icons";
import { useMeStore } from "../../store";
import { useSubscription } from "urql";
const Tab = createBottomTabNavigator<AppParamList>();

const Doc = `
  subscription OnNewFriendRequest($input: OnNewFriendRequestInputType!) {
    onNewFriendRequest(input: $input) {
      message
      friend {
        id
        nickname
      }
    }
  }
`;
export const AppTabs = () => {
  const { me } = useMeStore();
  const [{ data, fetching, error }] = useSubscription({
    query: Doc,
    variables: {
      input: { id: "ef7c5256-80f0-4de0-9893-51f3e3e9926e" },
    },
  });

  console.log(JSON.stringify({ data, fetching, error }, null, 2));
  return (
    <Tab.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerShown: false,
        tabBarHideOnKeyboard: true,
        tabBarStyle: {
          elevation: 0,
          shadowOpacity: 0,
          borderTopWidth: 0,
          borderColor: "transparent",
          backgroundColor: COLORS.primary,
          paddingVertical: 10,
          height: 80,
          width: "auto",
        },
        tabBarShowLabel: false,
        tabBarBadgeStyle: {
          backgroundColor: "cornflowerblue",
          color: "white",
          fontSize: 10,
          maxHeight: 20,
          maxWidth: 20,
          marginLeft: 3,
        },
        tabBarVisibilityAnimationConfig: {
          hide: {
            animation: "timing",
          },
          show: {
            animation: "spring",
          },
        },
        tabBarItemStyle: {
          width: "auto",
        },
      }}
    >
      <Tab.Screen
        options={{
          tabBarIcon: (props) => (
            <TabIcon
              {...props}
              title="home"
              Icon={{
                name: "home-account",
                IconComponent: MaterialCommunityIcons,
              }}
            />
          ),
        }}
        name="Home"
        component={HomeStack}
      />
      <Tab.Screen
        options={{
          tabBarIcon: (props) => (
            <TabIcon
              {...props}
              title="friends"
              Icon={{
                name: "person-search",
                IconComponent: MaterialIcons,
              }}
            />
          ),
        }}
        name="Friends"
        component={FriendsStack}
      />
      <Tab.Screen
        options={{
          tabBarIcon: (props) => (
            <TabIcon
              {...props}
              title="notifications"
              Icon={{
                name: "notifications",
                IconComponent: Ionicons,
              }}
            />
          ),
        }}
        name="Notifications"
        component={NotificationsStack}
      />
      <Tab.Screen
        options={{
          tabBarIcon: (props) => (
            <TabIcon
              {...props}
              title="settings"
              Icon={{
                name: "settings",
                IconComponent: Ionicons,
              }}
            />
          ),
        }}
        name="Settings"
        component={SettingsStack}
      />
    </Tab.Navigator>
  );
};

In my logs in a react-native application i'm only getting the loading state to true as follows:

{
  "fetching": true
}

But in my React web app when a new subscription is fired i'm getting the expected results as follows:

{
  "data": {
    "onNewFriendRequest": null
  },
  "fetching": false
}

Why am i getting this different behaviour in react-native?.

[enisdenjo]

This seems to be a specific urql / react-native question. As I have no experience with either, I cannot be of help here. Please consider asking the respective projects. Sorry.

[CrispenGari]

@enisdenjo I don't think the issue is with urql because the same behaviour happens when i'm using apollo. So they might be an issue with graphql-sse.

[enisdenjo]

Then it could be react-native directly. To confirm its graphql-sse itself, try using it without any client (no apollo no urql) and see whether the issue persists - if it does, I'd appreciate a repro repository that I can run locally and poke around to come up with a fix.

[CrispenGari]

Thank you for your response, it seems like this sse does not work within native environment, as i'm getting the following warning from my logs in a react-native app:

 WARN  Possible Unhandled Promise Rejection (id: 2):
ReferenceError: Property 'document' doesn't exist
ReferenceError: Property 'document' doesn't exist

I've tried to use the graphql-sse/client:

import {
  SubscriptionClient,
  SubscriptionClientOptions,
} from "@graphql-sse/client";

export const subscriptionClient = SubscriptionClient.create({
  graphQlSubscriptionUrl: `http://${serverDomain}/graphql`,
});

Usage within my react-native component is as follows:

const Doc = `
  subscription OnNewFriendRequest($input: OnNewFriendRequestInputType!) {
    onNewFriendRequest(input: $input) {
      message
      friend {
        id
        nickname
      }
    }
  }
`;

export const AppTabs = () => {
  const { me } = useMeStore();
  const subscription = subscriptionClient.subscribe({
    query: Doc,
    variables: {
      input: { id: "ef7c5256-80f0-4de0-9893-51f3e3e9926e" },
    },
  });
  React.useEffect(() => {
    const observable = subscription.subscribe({
      next: (value) => {
        console.log({ value });
      },
      error: (error) => {
        console.log({ error });
      },
    });
    return () => observable.unsubscribe();
  }, []);
.....

But it seems not working again. Do you have any working example with subscriptions and react-native using graphql-sse???

[enisdenjo]

You're using the wrong library. This library is not @graphql-sse/client and has no association with the @graphql-sse organization on npm whatsoever.

This library is graphql-sse. Please install it instead and read the getting started documentation.

Do you have any working example with subscriptions and react-native using graphql-sse???

As I said, I have no experience with react-native and therefore don't have a working example. PRs are more than welcome!