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)
})