How can i use querystring parameters with msw mock api responses? #28459
-
SummaryI 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,
I would appreciate any guidance / updated documentation I have missed / not been able to find easily to achieve the above Additional informationimport 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 reproductionNo response |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
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 })
}),
] |
Beta Was this translation helpful? Give feedback.
https://mswjs.io/docs/recipes/query-parameters/