Embed a GraphiQL View

The graphiql directive allows us to embed a GraphiQL view in the documentation, we can optionally make this live and editable if a server is available.

Static View

A static embedded view:

Loading GraphiQL...

{ country(code: "BR") { name native capital emoji currency languages { code name } } }

{ "data": { "country": { "name": "Brazil", "native": "Brasil", "capital": "Brasília", "emoji": "🇧🇷", "currency": "BRL", "languages": [ { "code": "pt", "name": "Portuguese" } ] } } }

Source:

.. graphiql::
  :query:
    {
      country(code: "BR") {
        name
        native
        capital
        emoji
        currency
        languages {
          code
          name
        }
      }
    }
  :response:
    {
      "data": {
        "country": {
          "name": "Brazil",
          "native": "Brasil",
          "capital": "Brasília",
          "emoji": "🇧🇷",
          "currency": "BRL",
          "languages": [
            {
              "code": "pt",
              "name": "Portuguese"
            }
          ]
        }
      }
    }

Live, Editable View

If a server with a GraphQL API is available the sphinx view can be configured to use it. In this case it becomes editable:

Loading GraphiQL...

{ country(code: "BR") { name native capital emoji currency languages { code name } } }

{ "data": { "country": { "name": "Brazil", "native": "Brasil", "capital": "Brasília", "emoji": "🇧🇷", "currency": "BRL", "languages": [ { "code": "pt", "name": "Portuguese" } ] } } }

Source:

Note

If https://countries.trevorblades.com/ is unavailable the view will revert to the static case.

.. graphiql:: https://countries.trevorblades.com/
    :query:
      {
        country(code: "BR") {
          name
          native
          capital
          emoji
          currency
          languages {
            code
            name
          }
        }
      }
    :response:
      {
        "data": {
          "country": {
            "name": "Brazil",
            "native": "Brasil",
            "capital": "Brasília",
            "emoji": "🇧🇷",
            "currency": "BRL",
            "languages": [
              {
                "code": "pt",
                "name": "Portuguese"
              }
            ]
          }
        }
      }