Mocking shopify api

[allforabit]

Hi, have just started to dig into this library. It really looks like it's solving the problem of creating maintainable mock data really. Thanks, super work on this! I'm thinking of using the library to mock responses from the Shopify backend but hit the initial snag of it using different arguments for paging. I.e. shopify uses first but msw data uses take and skip, etc. What's the best way around this do you think? Would there need to be a custom generateGraphQLHandlers for Shopify's graphql api?

Thanks!

[kettanaito]

Hey, @allforabit. Thank you for your kind words.

Our pagination API is not configurable and I don't think it should be, honestly. The multitude of different scenarios and API design conventions is too broad, and I generally dislike configurations when it comes to empowering different use cases.

Instead, I recommend you create your custom handlers while utilizing the Data's built-in pagination.

import { rest } from 'msw'
import { factory, primaryKey } from '@mswjs/data'

const db = factory({
  product: {
    id: primaryKey(String),
    title: String,
    price: Number,
  },
})

export const handlers = [
  rest.get('/products', (req, res, ctx) => {
    // Take the pagination query parameters supplied by Shopify.
    const first = req.url.searchParams.get('first')

    const products = db.product.findMany({
      // Skipping the "where" predicate will match all products.
      where: {},
      // Map Shopify's pagination parameters with those
      // supported by the Data.
      take: first,
    })

    return res(ctx.json(products))
  }),
]

You will have to implement the CRUD request handlers by yourself but that is not a bad thing. In the end, you get much more control over the handlers, so you can map to any third-party API requirements with ease.

Alternatively, you can modify the handlers returned from .toHandlers('graphql'):

const shopifyHandlers = db.product.toHandlers('graphql')

export const handlers = [
  ...shopifyHandlers.map((handler) => {
    const { resolver } = handler

    handler.resolver = (req, res, ctx) => {
      // Set the "take" query parameter expected by the Data
      // to equal the "first" query parameter sent by Shopify.
      req.url.searchParams.set('take', req.url.searchParams.get('first'))
      return resolver(req, res, ctx)
    }

    return handler
  }),
]

This is generally a more brittle approach because you're coupling your logic with MSW's internals. By using this approach it becomes your responsibility to ensure proper implementation across different MSW versions if they change the internal handler implementation, for example. Use it as the last resort.

[allforabit]

Ok that's brilliant, thanks very much. I understand fully the futility of trying to make it cater for every different api. These suggestions are plenty to set my on the right track.

[kettanaito]

I'm glad to hear that helped. Please, if you like the library and want to support my involvement with it, consider supporting me via GitHub Sponsors or the entire team via Open Collective. Each contribution counts. Thank you.

[cloud-walker]

What if I need to query the previous page? So for shopify the variables are last: number, before: string, I should sort the findMany?

[kettanaito]

The before variable implies a cursor, am I right?
Map the functionality to the .findMany arguments. It supports cursor-based pagination as well. If it cannot be mapped directly but is still a valid pagination pattern, consider opening an issue in the Data library.