How can i use querystring parameters with msw mock api responses?

[OwenPattison]

Summary

I am trying to achieve something that I consider a common task, having a component call an API that can refresh/update data when the querystring changes.

Trying to achieve this in storybook has been very difficult first to find documentation around doing such a thing and secondly then trying to implement something.

For context I am using Vue3, Storybook 8 with msw to mock API response currently and assumed if I had an API request with a querystring, given I had a matching msw handler for this URL + querystring the response would be picked up, however, this does not seem to be the case.

I have looked at several solutions to the problem,

• @storybook/addon-queryparams - very little documentation surrounding this makes it difficult
• using args - this does seem to allow setting key value pairs in the querystring, but msw does not seem to pattern match off the back of that

I would appreciate any guidance / updated documentation I have missed / not been able to find easily to achieve the above

Additional information

import type { Meta, StoryObj } from "@storybook/vue3";
import { HttpResponse, http } from "msw";
import type { PagedDataSource, MyComponentDto } from "my/package";

import MyComponent from "./MyComponent.vue";
import { buildMockedData } from "./data/mockedCompetencyData";

const meta: Meta<typeof MyComponent> = {
    component: MyComponent
};

export default meta;

type Story = StoryObj<typeof MyComponent>;

export const NoPagination: Story = {
    args: {
        apiUrl: "api/data",
        page: 1
    },
    parameters: {
        msw: {
            handlers: [
                http.get("api/data", () => {
                    return HttpResponse.json<PagedDataSource<MyComponentDto>>({
                        data: [
                            buildMockedData("Data 1"),
                            buildMockedData("Data 2"),
                            buildMockedData("Data 3")
                        ],
                        count: 3
                    });
                }),
            ],
        },
    }
};

export const Pagination: Story = {
    args: {
        apiUrl: "api/data",
        page: 1
    },
    parameters: {
        msw: {
            handlers: [
                // Need a way to handle mocking paged data API calls
                http.get("api/data?page=1", () => {
                    return HttpResponse.json<PagedDataSource<MyComponentDto>>({
                        data: [
                            buildMockedData("Data 1"),
                            buildMockedData("Data 2"),
                            buildMockedData("Data 3"),
                            buildMockedData("Data 4"),
                            buildMockedData("Data 5"),
                            buildMockedData("Data 6"),
                            buildMockedData("Data 7"),
                            buildMockedData("Data 8"),
                            buildMockedData("Data 9"),
                            buildMockedData("Data 10")
                        ],
                        count: 40
                    });
                }),
                http.get("api/data?page=2", () => {
                    return HttpResponse.json<PagedDataSource<MyComponentDto>>({
                        data: [
                            buildMockedData("Page 2 Data 1"),
                            buildMockedData("Page 2 Data 2"),
                            buildMockedData("Page 2 Data 3"),
                            buildMockedData("Page 2 Data 4"),
                            buildMockedData("Page 2 Data 5"),
                            buildMockedData("Page 2 Data 6"),
                            buildMockedData("Page 2 Data 7"),
                            buildMockedData("Page 2 Data 8"),
                            buildMockedData("Page 2 Data 9"),
                            buildMockedData("Page 2 Data 10")
                        ],
                        count: 40
                    });
                }),
            ],
        },
    }
};

Create a reproduction

No response

[kasperpeulen]

https://mswjs.io/docs/recipes/query-parameters/

export const handlers = [
  http.get('/product', ({ request }) => {
    // Construct a URL instance out of the intercepted request.
    const url = new URL(request.url)
 
    // Read the "id" URL query parameter using the "URLSearchParams" API.
    // Given "/product?id=1", "productId" will equal "1".
    const productId = url.searchParams.get('id')
 
    // Note that query parameters are potentially undefined.
    // Make sure to account for that in your handlers.
    if (!productId) {
      return new HttpResponse(null, { status: 404 })
    }
 
    return HttpResponse.json({ productId })
  }),
]