Breaking News: Grepper is joining You.com. Read the official announcement!

React apollo client subscription

Agreeable Armadillo answered on August 8, 2023 Popularity 6/10 Helpfulness 3/10

answer React apollo client subscription

React apollo client subscription

Comment

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

class SubscriptionService {
  constructor() {
    const httpLink = new HttpLink({
      uri: 'http://localhost:8000/graphql', // your GraphQL server URL
    });

    const wsLink = new WebSocketLink({
      uri: 'ws://localhost:8000/graphql', // your GraphQL WebSocket server URL
      options: {
        reconnect: true,
      },
    });

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

    this.client = new ApolloClient({
      link,
      cache: new InMemoryCache(),
    });
  }

  subscribeToNewMessages(roomName, onMessageReceived) {
    const query = `
      subscription OnNewMessage($roomName: String!) {
        newMessage(roomName: $roomName) {
          body
          user {
            username
          }
          room {
            roomName
          }
          createdAt
        }
      }
    `;

    this.client
      .subscribe({
        query,
        variables: { roomName },
      })
      .subscribe({
        next(response) {
          onMessageReceived(response.data.newMessage);
        },
        error(err) { console.error('err', err); },
      });
  }
}

const subscriptionService = new SubscriptionService();

export default subscriptionService;

Popularity 6/10 Helpfulness 3/10 Language javascript

Source: chat.openai.com

Tags: javascript subscription

Link to this answer
Share Copy Link

Contributed on Aug 08 2023

Agreeable Armadillo

0 Answers Avg Quality 2/10

React apollo client subscription

Contents

More Related Answers

React apollo client subscription

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.