Error with GraphQL Subscription

[MarkGaskin]

Following the documentation here, I tried to implement a subscription in this file:

// Imports

const chatSubscriptionSelector = graphQLSelector({
    key: 'ChatSubscription',
    environment: MyEnvironmentKey,
    query: graphql`
        subscription chatListSubscription {
            getChat {
                content
                id
            }
        }
    `,
    variables: {},
    mapResponse: (data) => {
        console.log(data);
        return data;
    },
});

const ChatList = () => {
          const [chat, setChat] = useRecoilValue(chatSubscriptionSelector);
        
          return (
              <>
                  <div className="row">
                      <table className="table table-hover">
                          <thead className="thead-light">
                              <tr>
                                  <th>Title</th>
                                  <th>Completed?</th>
                                  <th>Actions</th>
                              </tr>
                          </thead>
                          <tbody>
                              {chats.map((chat) => (
                                  <tr key={chat.id}>
                                      <td>{chat.content}</td>
                                      <td>{chat.isVerified ? '✅' : ''}</td>
                                      <td>
                                          <button
                                              className="btn btn-sm btn-info"
                                              onClick={(_) => toggleChat(chat.id!)}
                                          >
                                              Toggle
                                          </button>
                                          <button
                                              className="btn btn-sm btn-danger"
                                              onClick={(_) => removeChat(chat.id!)}
                                          >
                                              Remove
                                          </button>
                                      </td>
                                  </tr>
                              ))}
                          </tbody>
                      </table>
                  </div>
              </>
          );
      };

export default ChatList;

But I'm seeing this error in the console:

index.js:591 Uncaught TypeError: Cannot read properties of undefined (reading 'operationKind')
    at Object.effects (index.js:591:1)
    at index.js:8587:1
    at index.js:643:1
    at myGet (index.js:8663:1)
    at evaluateSelectorGetter (index.js:7475:1)
    at getSelectorLoadableAndUpdateDeps (index.js:7613:1)
    at index.js:7777:1
    at detectCircularDependencies (index.js:7755:1)
    at Object.selectorGet [as get] (index.js:7777:1)
    at getNodeLoadable (index.js:2562:1)

Any help would be appreciated.