Client Request Basics

All GraphQL requests are POST method request.

Defaults to endpoint of /graphql.

If you make a POST fetch request to /graphql endpoint with a stringified query, GraphQL will respond with expected payload:

options = {
  method: 'POST',
  headers: {'Content-Type':'application/json'},
  body: JSON.stringify({
    query:`
      {
        title
      }
    `
  })
}

fetch('/graphql', options);

Client Input

Client query can define inputs/arguments.

Query argument variable needs to start with a $ sign.

• Arguments are typed.

getUnits field is an entry point to the graph.

• Arguments defined are passed to the field.

query getUnits($ID: String!) {
  getUnits(id: $ID) {
    id
    name
    createdDatetime
    updatedDatetime
  }
}

This would add another field to the request:

options = {
  method: 'POST',
  headers: {'Content-Type':'application/json'},
  body: JSON.stringify({
    query:`
      {
        title
      }
    `
    variables: {
      // also used for mutation payload
      "ID": "a731-21"
    }
  })
}

fetch('/graphql', options);

Client Querying is Flexible

Client can request for flexible information it wants from the graph

• Meaning, the client can define what will be scoped to the particular return/response

Backend will have to support all possible fields for query in case the frontend requests for it (any permutation)

# Mutation
mutation submitInput($mutationInput: GraphqlInputType!) {
  submitInput(input: $mutationInput) {
    id
    name
    inputMetric
    createdDatetime
    updatedDatetime
    # there could be a lot more fields in existence
  }
}

# Mutation payload
{
  "input": {
    "name": "Sam",
    "id": "abc123"
  }
}