Connecting to a GraphQL server

Switch to the GraphQL platform on Hoppscotch and connect to the below GraphQL server.

https://echo.hoppscotch.io/graphql

Once a successful connection has been made, you can view both documentation and the schema using Hoppscotch.

It is important to explore the schema to understand the different queries, mutations, types, and subscriptions that are offered by the endpoint.

Running the query

You can execute queries to retrieve data from the GraphQL server by following these steps:

  • Open the Documentation panel to explore the available queries for the endpoint.
  • Click on query under Root Types to view the listed query fields.
  • Click the ”+” button next to a query field to add it to the Query editor with a structured template.
  • Expand the query by clicking on it, then use the ”+” button to add specific fields, arguments, or filters.
  • Customize the query as needed by modifying fields, adding arguments, or setting variables directly in the Query editor.

Fetching Countries Data

Let’s explore a sample query using the Countries GraphQL API.

  1. Open Hoppscotch, switch to the GraphQL client and connect to the endpoint below:

    https://countries.trevorblades.com/graphql
    
  2. Explore the schema and documentation to understand more about the endpoint.

  3. Select the countries query, cherry-pick the fields, and add a filter to return results where the name field is equal to “Germany”.

    {
      countries (filter: {name: {eq: "Germany"}}) {
        name
        code
        capital
        emoji
        currencies
      }
    }
    
  4. Click on the run button to execute the query.

  5. The query will return the following response.

    {
      "data": {
        "countries": [
          {
            "name": "Germany",
            "code": "DE",
            "capital": "Berlin",
            "emoji": "🇩🇪",
            "currencies": [
              "EUR"
            ]
          }
        ]
      }
    }