Use the GraphQL Explorer and the SDK

On this page, we will look in more detail at sending GraphQL requests. We'll explore two options: one using our GraphQL IDE, and the other using the SDK.

GraphQL Explorer

1. Log in to the Merchant Center, then select your project.
2. From the Merchant Center main menu, navigate to Settings > Developer settings.
3. Click the GraphQL Explorer tab.

Next, let’s break down the GraphQL Explorer interface and discuss its capabilities.

Project Selection

Query window

The left-hand side is where you enter your queries or mutations:

The autocomplete feature helps you to know the names of the fields you want to request and what is syntactically correct, like these examples:

You can select the different properties you're interested in.

It also helps with parameters when you type the open parentheses:

Once you’ve entered your query, you can run it using the play button within the query window. You can have multiple queries in your query window as long as they are all named. When you click the play button, it will display all of the queries in the window and allow you to select the one you'd like to run.

Results window

To the right of the query window is the results window. This is where you can see the response to your request:

Documentation Explorer

Search:

Refine:

Additional functionality

Let's explore some additional functionality:

• Prettify query: formats your query to enhance readability. This is helpful if you’ve just been experimenting and making lots of changes as you refine and change your query over time.
• Show history: displays a list of your recent queries.
• Merge fragments into query: merges reusable fragments into a query to simplify and streamline GraphQL requests.

Composable Commerce SDKs

The Composable Commerce Java SDK has a module that provides GraphQL support. It generates a type-safe query and projection builder. Results can be mapped to the correct response type.

GraphQLResponse<CustomerQueryResult> response = client
  .graphql()
  .query(
    GraphQL
      .customers(query ->
        query
          .sort((Collections.singletonList("id asc")))
          .where("firstName=\"Martha\"")
      )
      .projection(root -> root.results().firstName().lastName().email())
  )
  .executeBlocking()
  .getBody();

logger.info("Total Customers: " + response.getData().getTotal());
logger.info("First" + "\t" + "Last" + "\t" + "Email");
logger.info("-----" + "\t" + "----" + "\t" + "-----");
response
  .getData()
  .getResults()
  .forEach(result ->
    logger.info(
      result.getFirstName() +
      "\t" +
      result.getLastName() +
      "\t" +
      result.getEmail()
    )
  );
client.close();

Which outputs the following (modified to remove some logger info):

{
  "data": {
    "customers": {
      "results": [
        {
          "firstName": "Jennifer",
          "lastName": "Jones",
          "email": "jen@example.uk"
        },
        {
          "firstName": "Jennifer",
          "lastName": "Schmidt",
          "email": "jen@example.de"
        },
        {
          "firstName": "Jennifer",
          "lastName": "Robinson",
          "email": "jen@example.com"
        }
      ]
    }
  }
}

Test your knowledge