Skip to main content
Version: Canary

Mocking GraphQL in Storybook

Pre-requisites

  1. Storybook should be running, start it by running yarn rw storybook
  2. Have a Cell, Query, or Mutation that you would like to mock

Where to put mock-requests

  1. Mock-requests placed in a file ending with .mock.js|ts are automatically imported and become globally scoped, which means that they will be available in all of your stories.
  2. Mock-requests in a story will be locally scoped and will overwrite globally scoped mocks.

Mocking a Cell's Query

Locate the file ending with .mock.js in your Cell's folder. This file exports a value named standard, which is the mock-data that will be returned for your Cell's QUERY.

UserProfileCell/UserProfileCell.js
export const QUERY = gql`
query UserProfileQuery {
userProfile {
id
}
}
`

// UserProfileCell/UserProfileCell.mock.js
export const standard = {
userProfile: {
id: 42
}
}

The value assigned to standard is the mock-data associated to the QUERY, so modifying the QUERY means you need to modify the mock-data.

UserProfileCell/UserProfileCell.js
export const QUERY = gql`
query UserProfileQuery {
userProfile {
id
+ name
}
}
`

// UserProfileCell/UserProfileCell.mock.js
export const standard = {
userProfile: {
id: 42,
+ name: 'peterp',
}
}

Behind the scenes: Redwood uses the value associated to standard as the second argument to mockGraphQLQuery.

GraphQL request variables

If you want to dynamically modify mock-data based on a queries variables the standard export can also be a function, and the first parameter will be an object containing the variables:

UserProfileCell/UserProfileCell.mock.js
export const standard = (variables) => {
return {
userProfile: {
id: 42,
name: 'peterp',
profileImage: `https://example.com/profile.png?size=${variables.size}`
}
}
}

Mocking a GraphQL Query

If you're not using a Cell, or if you want to overwrite a globally scoped mock, you can use mockGraphQLQuery:

Header/Header.stories.js
export const withReallyLongName = () => {
mockGraphQLQuery('UserProfileQuery', () => {
return {
userProfile: {
id: 99,
name: 'Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr.'
}
}
})
return <Header />
}

Mocking a GraphQL Mutation

Use mockGraphQLMutation:

UserProfileCell/UserProfileCell.mock.js
export const standard = /* ... */

mockGraphQLMutation('UpdateUserName', ({ name }) => {
return {
userProfile: {
id: 99,
name,
}
}
})

Mock-requests that intentionally produce errors

mockGraphQLQuery and mockGraphQLMutation have access to ctx which allows you to modify the mock-response:

mockGraphQLQuery('UserProfileQuery', (_vars, { ctx }) => {
// Forbidden
ctx.status(403)
})