How do I implement subscriptions with Apollo Client in a React app?

How do I implement subscriptions with Apollo Client in a React app?

To implement subscriptions with Apollo Client in a React app, you need to set up a WebSocket link. First, install the necessary packages: @apollo/client and subscriptions-transport-ws. Then, create a WebSocket link and combine it with your HTTP link.

Can you show me a code example for setting up the WebSocket link?

Sure! Here's a basic example:

import { ApolloClient, InMemoryCache, split } from '@apollo/client';
import { WebSocketLink } from 'subscriptions-transport-ws';
import { HttpLink } from 'apollo-link-http';
import { getMainDefinition } from 'apollo-utilities';

const httpLink = new HttpLink({ uri: 'http://localhost:4000/graphql' });

const wsLink = new WebSocketLink({
  uri: `ws://localhost:4000/graphql`,
  options: { reconnect: true }
});

const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink
);

const client = new ApolloClient({
  link: splitLink,
  cache: new InMemoryCache(),
});

This code sets up both HTTP and WebSocket links.

What about using subscriptions in a React component?

You can use the useSubscription hook from Apollo Client. Here's an example:

import { useSubscription, gql } from '@apollo/client';

const MESSAGE_SUBSCRIPTION = gql`
  subscription OnMessageAdded {
    messageAdded {
      id
      content
    }
  }
`;

const MessageList = () => {
  const { data, loading } = useSubscription(MESSAGE_SUBSCRIPTION);

  if (loading) return <p>Loading...</p>;
  return <div>{data.messageAdded.content}</div>;
};

This component listens for new messages and displays them.