You are viewing the preview version of this book
Click here for the full version.

Sending queries and mutations

Try it yourself

You can find code example for this chapter here.

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({
    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));

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 {
`, "MyQuery", {});

And the same works for mutations too:

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

There is more, but you've reached the end of this preview
Read this and all other chapters in full and get lifetime access to:
  • all future updates
  • full web-based access
  • PDF and Epub versions