Skip to content

Commit

Permalink
Fix "standard" mock type requiring a function
Browse files Browse the repository at this point in the history
This must have been overlooked when this became mandatory via #1801
  • Loading branch information
Philzen authored Dec 6, 2024
1 parent 495f625 commit 4b04d2e
Showing 1 changed file with 26 additions and 32 deletions.
58 changes: 26 additions & 32 deletions docs/docs/how-to/mocking-graphql-in-storybook.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@ export const QUERY = gql`
`

// UserProfileCell/UserProfileCell.mock.js
export const standard = {
export const standard = (/* vars, { ctx, req } */) => ({
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.
Expand All @@ -38,18 +38,18 @@ export const QUERY = gql`
query UserProfileQuery {
userProfile {
id
+ name
+ name
}
}
`

// UserProfileCell/UserProfileCell.mock.js
export const standard = {
export const standard = (/* vars, { ctx, req } */) => ({
userProfile: {
id: 42,
+ name: 'peterp',
+ name: 'peterp',
}
}
})
```

> Behind the scenes: Redwood uses the value associated to `standard` as the second argument to `mockGraphQLQuery`.
Expand All @@ -59,33 +59,29 @@ export const standard = {
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:

```jsx {1,6} title="UserProfileCell/UserProfileCell.mock.js"
export const standard = (variables) => {
return {
userProfile: {
id: 42,
name: 'peterp',
profileImage: `https://example.com/profile.png?size=${variables.size}`,
},
}
}
export const standard = (variables) => ({
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`:

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

## Mocking a GraphQL Mutation
Expand All @@ -96,14 +92,12 @@ Use `mockGraphQLMutation`:
export const standard =
/* ... */

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

## Mock-requests that intentionally produce errors
Expand Down

0 comments on commit 4b04d2e

Please sign in to comment.