GraphQL Query

<script type="edgeside/graphql" ...>

Fetches data from any service that exposes a GraphQL API.

Current limitations:

• No out of the box handling of authentication. For now any service that requires authentication to be handled in a secure way will need a custom element handler (see Customisation)

Attributes

Name	Description	Required?
data-edgeside-output	specifies a key under which it should output data	yes
data-edgeside-endpoint	specifies the endpoint for the GraphQL service	yes
data-edgeside-cache-ttl	specifies a Time To Live value for caching of query results in the Cloudflare cache, in seconds (default = 60)	no
data-edgeside-parameter-map	provides an optional mapping between request params or URL segments in the original page request and parameters to the query. (see Parameter Mapping)	no
data-edgeside-input	specifies an optional key under which it should be able to find input data which can be used in a parameter map	no

Element content

A query in the GraphQL language

---

Examples

example1 - A Simple GraphQL Query

We execute a simple GraphQL query, in this case to a service which provides geographical data. Our query requests a list of continents, with the name and code of each one. We dump the output to the screen using the Debug element.

<script type="edgeside/graphql"
  data-edgeside-output="continents"
  data-edgeside-endpoint="http://countries.trevorblades.com/" >
  {
    continents {
      name
      code
    }
  }
</script>

<script type="edgeside/debug"
        data-edgeside-input="continents">
</script>

Live Results:

Live Results (Source):

---

example2 - A Parameterised GraphQL Query (From Request Params)

We execute a GraphQL query that takes a parameter, in this case to a service which provides geographical data. Our query requests data about a country, with the country code taken from a request parameter. We dump the output to the screen using the Debug element.

<script type="edgeside/graphql"
  data-edgeside-output="country"
  data-edgeside-endpoint="http://countries.trevorblades.com/"
  data-edgeside-parameter-map="code:country"
  >
  query Country ($code:ID!){country(code:$code){
    name
    native
    phone
    capital
    continent {name}
    languages {name native}
    emoji
    emojiU
  }}
</script>

<script type="edgeside/debug"
        data-edgeside-input="country">
</script>

Live Results:

Live Results (Source):

---

example3 - A Parameterised GraphQL Query (From URL Segment)

We execute a GraphQL query that takes a parameter, in this case to a service which provides geographical data. Our query requests data about a country, with the country code taken from a segment of the URL. We dump the output to the screen using the Debug element. Note that in order to support responding to multiple URLs from a single HTML page, we will also need to use URL Rewriting.

<script type="edgeside/graphql"
  data-edgeside-output="country"
  data-edgeside-endpoint="http://countries.trevorblades.com/"
  data-edgeside-parameter-map="code:/1"
  >
  query Country ($code:ID!){country(code:$code){
    name
    native
    phone
    capital
    continent {name}
    languages {name native}
    emoji
    emojiU
  }}
</script>

<script type="edgeside/debug"
        data-edgeside-input="country">
</script>

Live Results:

Live Results (Source):

---