TIL - GraphQL

April 21, 2020

What follows are notes from a class. Incomplete thoughts & code that probably will only make sense to me. Given enough time, even that may be a stretch! Reference at your own risk 😂

We used GraphCMS to play around with this.

Basic anonymous query:

{
  todos {
    name
    description
    dueTime
  }
}

Anonymous query with sort order:

{
  todos(orderBy: name_ASC) {
    name
  }
}

Query with variables:

query Todo($where: TodoWhereUniqueInput!) {
  todo(where: $where) {
    id
    name
    description
  }
}

# query variable
{
  "where": {
    "id": "ck99zu9fs021r0160ubnnvw71"
  }
}

Create a mutation:

mutation createFruit($data: FruitCreateInput!){
  createFruit(data: $data) {
    id
    name
    growthMethod
    whereFrom
  }
}

# The data to send
{
  "data": {
    "name": "Orange",
    "growthMethod": "tree",
    "whereFrom": "Sub-tropical"
  }
}

CodePen Demo for basic querying as API with fetch.

GraphQL and local state management isn’t really that great because you’re required to include extra fields (like type, type description, etc.).

To create a GraphQL server you have to define all of the types. You also have to write all of the resolvers to tell the server what to send back in response to queries. Apollo Server is a common tool to do this with. This GitHub repo is an example of a fullstack app.

Apollo has dev tools which you can add on to the browser.

Apollo Boost is a thing.

Re: usage: it’s a good way to save bandwidth for users, but it can be costly using it because there’s only one endpoint and it has to figure out what to do each time.

Tags icon Stacked price tag looking things Tags: