Learning PathModule

Use the GraphQL Explorer and the SDK

Learn which tools are required to send GraphQL queries and mutations in Composable Commerce.

Ask about this Page
Copy for LLM
View as Markdown

After completing this page, you should be able to:

  • Explain how to navigate the GraphQL Explorer interface.

  • Describe how to send a GraphQL request using one of the Composable Commerce SDKs.

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

GraphQL Explorer

The GraphQL Explorer is a built-in IDE in the Merchant Center for running GraphQL queries and mutations against your Project. To access it, go to Settings > Developer settings and click the GraphQL Explorer tab.
The GraphQL Explorer provides a query editor with autocomplete, a results window, and a Documentation Explorer for browsing the schema. Additional features include query prettification and history. For a full walkthrough of the interface, see GraphQL Explorer in the Merchant Center documentation.

Use the 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. For additional SDK examples, including TypeScript, Java, and .NET, see Using an SDK in the GraphQL API reference.
See our examples below for creating the Customer query using sort and where parameters that we explored earlier.

TypeScript

Java


const query = `
query {
 customers(where: "firstName=\\"Martha\\"", sort: "id asc" ) {
   results {
     firstName
     lastName
     email
   }
 }
}
`;

async function customerFetch() {
  try {
    const response = await apiRoot
      .graphql()
      .post({ body: { query } })
      .execute();

    console.log('Success', JSON.stringify(response.body, null, 2));
  } catch (error) {
    console.log(JSON.stringify(error, null, 2));
  }
}

customerFetch();

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": "Martha",
          "lastName": "Jones",
          "email": "martha@example.uk"
        },
        {
          "firstName": "Martha",
          "lastName": "Schmidt",
          "email": "martha@example.de"
        },
        {
          "firstName": "Martha",
          "lastName": "Robinson",
          "email": "martha@example.com"
        }
      ]
    }
  }
}

Test your knowledge