08/19 Official Notes

[Stommy123]

08/19 Day 18 Lecture Notes

Review of Morning Exercise

GQL

query {
  allCategory {
    _id
    name
    primaryImage {
      assert {
        url
      }
    }
  }
}

• Above is an example of how you would perform the allCategory query operation. In this query, the fields _id and primaryImage are being requested.
• Notice that primaryImage is followed by a set of {} with nested fields that are being requested. This is because primaryImage is neither a string, number, boolean, or null. It is a complex data type i.e an object therefore you must specify what fields are to be returned for that object

Lecture

Fetching with GQL

const sanityUrl = SANITY_URL
const query = `
  query {
    allCategory {
      _id
      name
      primaryImage {
        assert {
          url
        }
      }
    }
  }
`

const response = await fetch(SANITY_URL, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  }
  body: JSON.stringify({ query: sanityQuery })
})

const { data } = await response.json();

console.log(data.allCategory)

• Queries that are ran in a gql playground can be copied exactly as is and injected into a fetch's body.query
• The body of a gql fetch, must be stringified
• GQL queries all use the POST method to execute
• All gql response will contain a data wrapper around the requested query response, so when we convert the response to json, we can safetly destructure data from the response

Sanity

• sanity graphql deploy allows you to create a gql endpoint for your sanity project
• sanity login / sanity logout is how you authenticated to your sanity project in the terminal