Architecture

Before going further in understanding GraphQL, it's useful to get a sense of how GraphQL is actually used in an HTTP client (typically a web/mobile app).

GraphQL over HTTP

Check out the diagram below, to get a sense of how GraphQL is typically used in your stack:

GraphQL client-server flow:

1. Note that the GraphQL query is not really JSON; it looks like the shape of the JSON you want. So when we make a 'POST' request to send our GraphQL query to the server, it is sent as a "string" by the client.
2. The server gets the JSON object and extracts the query string. As per the GraphQL syntax and the graph data model (GraphQL schema), the server processes and validates the GraphQL query.
3. Just like a typical API server, the GraphQL API server then makes calls to a database or other services to fetch the data that the client requested.
4. The server then takes the data and returns it to the client in a JSON object.

Example GraphQL client setup:

In your day to day work, you don't actually need to worry about the underlying HTTP requests & responses.

Just like when you work with a REST API and use a HTTP client to reduce the boilerplate in making API calls and handling responses, you can choose a GraphQL client to make writing GraphQL queries, sending them and handling responses much easier.

In fact, the mechanism of how you send the GraphQL query and accept the GraphQL response has become standard. This makes working with GraphQL very easy on the client.

Here's what a typical GraphQL client setup and making a query would look like:

Copy

// Setup a GraphQL client to use the endpoint
let apollo = ApolloClient(url: URL(string: "http://hasura.io/learn/graphql")!)


// Now, construct your query as

query UserName($episode: Episode) {
  hero(episode: $episode) {
    name
  }
}

and send it as, ( Apollo generates a UserNameQuery class
that you can construct (with variables) and pass to ApolloClient#fetch(query:) )

apollo.fetch(query: UserNameQuery(episode: .empire)) { (result, error) in
  print(result?.data?.hero?.name) // Luke Skywalker
}