Use the GraphQL Explorer and the SDK

GraphQL Explorer

One easy way is to use our GraphQL IDE, the GraphQL Explorer. To access the GraphQL Explorer, do the following:

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

The GraphQL Explorer works on the project that you've selected in the Projects drop-down. If you want to work with data from a different Project, you can select another Project.

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.

At the bottom of the page is the Variables window. This is where you can enter the value for the query variables you used in the queries above:

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

To the left of the query window is the Documentation Explorer window, which slides open when you click Show Documentation Explorer. The window allows you to browse the schema to understand how to build your queries. It starts with the root types, but you can search or refine the types you need:

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

How can we begin to use GraphQL in our code? Just like our Composable Commerce SDKs provide help in using the REST APIs, they also provide help in using GraphQL.

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.

See our examples below for creating the Customer query using a sort and where parameters that we saw earlier.

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