AWS AppSync Subscriptions

[iamplo]

Hello,

I'm evaluating Urql for use with AppSync graph service and I have a question regarding Exchanges. AWS expects the following payload:

   'id': SUB_ID,
    'payload': {
        'data': GQL_SUBSCRIPTION,
        'extensions': {
            'authorization': {
                'host':HOST,
                'x-api-key':API_KEY
            }
        }
    },
    'type': 'start'

Many graphql clients and are expecting the query in a query field but AWS is looking for data. I'm using the forwardSubscription function to transform the payload and I can successfully register the subscription.

      subscriptionExchange({
        forwardSubscription(operation) {
          const { query, key, context } = operation;
          const q = JSON.stringify({
            query : operation.query,
            variables : operation.variables,
          });
          const payload = {
            data : q,
            extensions : {
              authorization : headers,
            },
            query,
            key,
            context,
          };
          return {
           // Forked graphql-ws to work with AWS
            subscribe : sink => {
              const dispose = wsClient.subscribe(payload, sink);
              return {
                unsubscribe : dispose,
              };
            },
          };
        },
      }),

Is there any issue with this approach? I want to make sure this falls within the responsibility of the Exchange function and will not cause issues with urql cache. Thanks!

[JoviDeCroock]

No, this approach shouldn't impose an issue as long as the responses follow the regular GraphQL spec.

[kitten]

To be fair, I believe there is no definitive spec for the subscriptions transport protocol. I'd suggest asking on the graphql-ws repo though whether they know or support the AppSync transport protocol over Websockets.

[bllanos]

I tested a different approach in which I am using Amazon Amplify's GraphQL client to perform the subscription and therefore I do not need to write custom code that is compatible with the transport protocol used by AWS AppSync:

import { API, graphqlOperation } from "aws-amplify";
import { subscriptionExchange } from "urql";

function forwardSubscription(operation) {
  return {
    subscribe: (sink) => {
      return;
      API.graphql(
        graphqlOperation(operation.query, operation.variables)
      ).subscribe({
        next: ({ value: { data } }) => {
          sink.next({ data });
        },
        error: (error) => {
          sink.error(error);
        },
      });
    },
  };
}

const subscriptionExchangeInstance = subscriptionExchange({
  forwardSubscription,
});