Sending queries and mutations

First, let's lay the groundwork for a client that integrates with a GraphQL backend! GraphQL works on top of HTTP, which means a query or a mutation can be done with a simple fetch. The request body and the headers are defined in the GraphQL specification, plus AppSync adds a layer for authorization.

The method is always POST, and the request body is a JSON with the GraphQL request, the operation name, and the variables. For the headers, the Content-Type is application/graphql, the host is the host from the URL. Finally, the value for the Authorization depends on the provider. For example, for a Cognito User Pool it's the access_token, for a Lambda authorizer it's the value that the function will get on the backend-side.

Putting it together, this code sends a GraphQL request to an AppSync API:

const sendAppSyncQuery = (APIURL, accessToken) =>
  async (query, operationName, variables) => {
  const url = new URL(APIURL);
  const res = await fetch(APIURL, {
    method: "POST",
    body: JSON.stringify({
      query,
      operationName,
      variables,
    }),
    headers: {
      "Content-Type": "application/graphql",
      host: url.hostname,
      Authorization: accessToken,
    },
  });
  if (!res.ok) {
    throw new Error("Failed");
  }
  const resJson = await res.json();
  if (resJson.errors) {
    throw new Error(JSON.stringify(resJson));
  }
  return resJson.data;
};

Notice the second step for error handling. Since GraphQL returns a success status code even if there was an error, the client should check the errors property of the response.

Calling this function:

sendAppSyncQuery(APIURL, accessToken)(`
  query MyQuery {
    currentUser {
      username
      id
    }
  }
`, "MyQuery", {});

And the same works for mutations too:

sendAppSyncQuery(APIURL, accessToken)(`
  mutation MyMutation($key: ID!, $public: Boolean!) {
    setImagePublicity(key: $key, public: $public) {
      key
      url
      public
    }
  }
`, "MyMutation", {key, public: desiredPublic})