event-guests-context.tsx

useSubscription<OnUpdateEventGuestSubscription, OnUpdateEventGuestSubscriptionVariables>({
    query: OnUpdateEventGuestDocument,
    variables: { eventId: eventId ?? '' },
    next: ({ data }) => {
      const { onUpdateEventGuest: guest } = data;

      if (guest) {
        updateEventGuest(guest);
      }
    },
    pause: !eventId,
  });

use-subscription.ts

import type { GraphQLOptionsV6, GraphqlSubscriptionMessage, GraphqlSubscriptionResult } from '@aws-amplify/api-graphql';
import type { DocumentNode } from 'graphql/index';
import { useEffect, useRef } from 'react';

import { useCreateAmplifySubscription } from '@/clients/amplify';

type Subscription = ReturnType<Awaited<ReturnType<ReturnType<typeof useCreateAmplifySubscription>>>['subscribe']>;

export default function useSubscription<T, V extends GraphQLOptionsV6<T, string>['variables']>({
  query,
  variables,
  pause,
  next,
}: {
  query: DocumentNode;
  variables: V;
  pause?: boolean;
  next: (message: GraphqlSubscriptionMessage<T>) => void;
}) {
  const createAmplifySubscription = useCreateAmplifySubscription();

  const subscriptionResultPromiseRef = useRef<Promise<GraphqlSubscriptionResult<T>>>();

  useEffect(() => {
    let subscription: Subscription;

    if (subscriptionResultPromiseRef.current) {
      return;
    }

    if (!pause) {
      (async () => {
        subscriptionResultPromiseRef.current = createAmplifySubscription(query, variables);

        subscription = (await subscriptionResultPromiseRef.current).subscribe({
          // error: console.log,
          next,
        });
      })();
    }

    return () => {
      subscription?.unsubscribe();
    };
  }, [createAmplifySubscription, next, pause, query, variables]);
}