Subscription Data Undefined Despite receiving Valid WebSocket Message

[vassantn]

Current Scenario:
I am using Apollo Client in a React Native app to handle GraphQL subscriptions. Despite receiving valid WebSocket messages, the subscription data remains undefined. Additionally:

• The loading state remains true indefinitely, even after the WebSocket connection successfully receives messages.
• The onData callback does not trigger, and no data is processed.
• The onSubscriptionData callback (now deprecated) also does not work.

Expected Behavior:
The subscription should:

• Transition the loading state to false once the data is received.
• Populate subscriptionData with the data from the WebSocket message.
• Trigger the onData callback, allowing the received data to be processed.

{ "id": "1", "type": "next", "payload": { "data": { "requestSent": { "visitationStatus": [], "lastInteracted": "2024-01-15T12:45:30.000Z", "firstname": "John", "address": "123 Mock Street, Springfield, USA", "photo": "mock-photo-id-12345", "deviceTokens": [ "APA91bMockExampleToken12345XYZ" ], "lastname": "Doe", "createdAt": "2024-01-01T08:00:00.000Z", "updatedAt": "2024-01-20T15:00:00.000Z", "showLocation": "NEARBY", "name": "John Doe", "joinMultipleGroupsPrompt": true, "personId": "mock-person-id-12345", "subheadline": "Software Engineer at MockCorp" } } } }

Here is the configuration and usage:

Apollo Client Setup:

import { ApolloClient, ApolloLink, HttpLink, InMemoryCache, defaultDataIdFromObject, from, split } from '@apollo/client';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { createClient } from 'graphql-ws';

`const wsLink = new GraphQLWsLink(createClient({
  url: ws_endpoint,
  lazy: true,
  reconnect: true,
  connectionParams: {
    headers: {
      'X-Api-Key': API_KEY,
    },
  },
  on: {
    connected: () => console.log('WebSocket connected'),
    message: (message) => console.log('Raw WebSocket message:', JSON.stringify(message, null, 2)),
    error: (error) => console.log('WebSocket error:', error),
  },
}));

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

export const client = new ApolloClient({
  link: from([retryLink, errorLink, splitLink]),
  cache: new InMemoryCache(),
}`

Subscription Usage:

`const REQUEST_SENT_SUBSCRIPTION = gql`
  subscription RequestSent($user: String!) {
    requestSent(user: $user) {
      visitationStatus
      lastInteracted
      firstname
      address
      photo
      deviceTokens
      lastname
      createdAt
      updatedAt
      showLocation
      name
      joinMultipleGroupsPrompt
      personId
      subheadline
    }
  }
`;

const { data: subscriptionData, loading, error } = useSubscription(REQUEST_SENT_SUBSCRIPTION, {
  variables: { user: userId },
  onData: ({ data }) => console.log('Received via onData:', data),
});
`

Environment:

1. Apollo Client: 3.12.4
2. React Native: 0.73.6
3. GraphQL server: 16.10.0