Running GraphQL Queries and Mutations with no direct session access in your Shopify App

Running GraphQL Queries and Mutations Without Direct Session Access in Your Shopify App

GraphQL has become the primary tool for Flare, almost entirely replacing REST APIs. We've discovered that the query/mutation structure significantly reduces the number of API calls we need to make. It also enhances speed and support, particularly with Shopify's GraphQL (GQL) interactions. While versatile and powerful, GQL can sometimes appear daunting and complex to developers.

This post aims to demystify GQL, making it more accessible, and to address common challenges that can impede progress, especially for newcomers. We'll explore using GQL within a Node.js Express app and discuss accessing sessions for shops externally. This enables asynchronous calls on a store's behalf, allowing for queries and mutations without direct requests from the store.

Understanding Queries and Mutations

If you're new to GraphQL, the terms 'queries' and 'mutations' might seem confusing. Here's a simple explanation:

• Queries: Retrieving data from GraphQL in a specific structure.
• Mutations: Modifying data at a remote source, like Shopify's database.

For those familiar with REST APIs, think of queries as GET requests to fetch data, and mutations as POST, PUT, DELETE requests to modify data. GQL simplifies this by not requiring the specification of request types for mutations.

GQL allows for the definition of data return structures through object relationships, which is more complex in REST APIs due to the need for detailed entity relationship definitions.

For example:

query productVariant($id: ID!) {
  productVariant(id: $id) {
    inventoryQuantity
    displayName
    product {
      id
    }
  }
}

This query fetches product variants and their parent products' IDs from Shopify, showcasing GQL's efficiency in retrieving related data in a single request.

Accessing GraphQL

There are several ways to access GQL in Shopify apps. One handy tool is the GQL editor available at http://localhost:3457/graphiql during development. This web interface allows for testing GQL queries against your development store's data.

Incorporating GQL into your app involves setting up authenticated sessions, crucial for query and mutation operations. Shopify's authentication process ensures secure client creation for GQL requests.

app.use("/api/*", shopify.validateAuthenticatedSession());

It's vital to ensure middleware compatibility and maintain the validateAuthenticatedSession() function as provided.

Creating a GQL client within an app route might look like this:

const GET_PRODUCT_VARIANT_QUERY = `
  query productVariant($id: ID!) {
    productVariant(id: $id) {
      inventoryQuantity
      displayName
      product {
        id
      }
    }
  }
`

app.get("/api/productVariant", async (req, res) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  const client = new shopify.api.clients.Graphql({
    session: res.locals.shopify.session,
  });
  const { body } = await client.query({
    data: {
      query: GET_PRODUCT_VARIANT_QUERY,
      variables: {
        id: req.query.id
      }
    }
  });
  if (body.data.productVariant) {
    res.status(200).json(body.data.productVariant);
  } else {
    res.status(500).json({ error: true });
  }
});

This example demonstrates defining a GQL query, setting up a route for the query, creating a GQL client, and handling the query response.

Running GraphQL Without an Authenticated Session

A common challenge is executing GQL operations without an active session. For tasks like automated emails or inventory updates, an authenticated client is necessary even without a direct user request.

The solution lies in accessing session storage with the shop's URL, allowing for authenticated client creation without an active session in the request object.

  const sessionId = shopify.api.session.getOfflineId(shop);
  const session = await shopify.config.sessionStorage.loadSession(sessionId);
  const client = new shopify.api.clients.Graphql({
    session,
  });

This approach enables authenticated GQL operations anywhere in the app, such as within webhook handlers.

Conclusion

This overview should clarify the advantages of GraphQL over REST, demonstrate practical GQL usage in Shopify app development, and provide strategies for overcoming common obstacles like session management. We encourage sharing further insights and tips to help the developer community leverage GraphQL's full potential.

Happy coding,

~ Josh