TypeScript Msw
Package name | Weekly Downloads | Version | License | Updated |
---|---|---|---|---|
@graphql-codegen/typescript-msw | Sep 5th, 2024 |
Installation
npm i -D @graphql-codegen/typescript-msw
Usage Requirements
In order to use this GraphQL Codegen plugin, please make sure that you have GraphQL operations (query
/ mutation
/ subscription
and fragment
) set as documents: …
in your codegen.yml
.
Without loading your GraphQL operations (query
, mutation
, subscription
and fragment
), you won’t see any change in the generated output.
This plugin generates msw
(https://github.com/mswjs/msw) mock handlers with TypeScript typings.
Config API Reference
link
type: object
GraphQL endpoint to use when working with multiple backends.
Usage Examples
import type { CodegenConfig } from '@graphql-codegen/cli';
const config: CodegenConfig = {
// ...
generates: {
'path/to/file.ts': {
// plugins...
config: {
link: {
name: 'stripe',
endpoint: 'https://api.stripe.com/graphql'
}
},
},
},
};
export default config;
MSW is a powerful tool for mocking HTTP requests in your tests and development environment. This plugin generates typed mock function wrappers for your GraphQL operations.
The generated functions are named with the pattern: mock<OperationName><OperationType>[LinkName]
. As an example, a query with the name getUser
would generate a mock function mockGetUserQuery
. If you have links configured for multiple endpoints, the link name will be appended to the end. A link configured for the Stripe API, for example, would generate a mock name mockAdminMutationStripe
. See below for more examples.
Configuration
To use this plugin, you need the typescript
plugin and typescript-operations
in your configuration.
If you are using the client
you can simply add the typescript-msw
plugin to your configuration:
import type { CodegenConfig } from '@graphql-codegen/cli'
const config: CodegenConfig = {
schema: 'schema.graphql',
documents: ['src/**/*.tsx', 'src/**/*.ts', '!src/gql/**'],
generates: {
'./src/gql/graphql.ts': {
preset: 'client',
plugins: ['typescript-msw']
}
}
}
export default config
Usage
The examples below assume the following GraphQL schema with a getUser
query and a setEmail
mutation.
query GetUser($id: ID!) {
GetUser(id: $id) {
name
email
id
}
}
mutation SetUsername($id: ID!, $name: String!) {
SetUsername(id: $id, name: $name) {
id
name
}
}
Mocking a query response
import { mockGetUserQuery } from './generated'
import { HttpResponse } from 'msw'
const mockSuccess = mockGetUserQuery(({ variables }) => {
const { id } = variables
return HttpResponse.json({
data: {
getUser: { name: 'John Doe', id }
}
})
})
export mockUserQuerySuccess;
Mocking an error response
import { mockGetUserQuery } from './generated'
import { HttpResponse } from 'msw'
const mockUserQueryError = mockGetUserQuery(({ variables }) => {
return HttpResponse.json({
errors: [
{
message: 'User not found'
}
]
})
})
export mockUserQueryError;
Accessing other resolver argument properties
The resolver function receives an object with a number of properties. The most up to date documentation is going to be in the msw
docs site.
mockGetUserQuery({ query, variables, operationName, request }) => {})
Migrating from MSW 1.x to 2.x
MSW 2.x introduced a number of breaking changes. The types from msw
are not compatible between the two versions so to upgrade, you will have to make some changes.
Updating the resolver function
You will need to update callback signatures to use the new resolver argument. In addition, the returned result must be a Response
object.
mockGetUserQuery((req, res, ctx) => {
const { id } = req.variables
return res(
ctx.data({
getUser: { name: 'John Doe', id }
})
)
})
After:
import { HttpResponse } from 'msw'
mockGetUserQuery(({ variables }) => {
const { id } = variables
return HttpResponse.json({
data: {
getUser: { name: 'John Doe', id }
}
})
})
Replacing the res.once
method
In addition to the changes above, since the res
object does not get passed to the resolver, you will need to adjust. To achieve the same behavior, you can pass a second “options” parameter to the mock function.
mockGetUserQuery((req, res, ctx) => {
const { id } = req.variables
return res.once(
ctx.data({
getUser: { name: 'John Doe', id }
})
)
})
import { HttpResponse } from 'msw'
mockGetUserQuery(
({ variables }) => {
const { id } = variables
return HttpResponse.json({
data: {
getUser: { name: 'John Doe', id }
}
})
},
{ once: true }
)