Generate msw schema to use as source for graphql-codegen

[drewbitt]

I'd love to integrate msw with graphql-codegen to get some typing for queries. There are lots of ways to integrate into graphql-codegen https://the-guild.dev/graphql/codegen/docs/config-reference/schema-field , however it is always involving schema. Is there any trick to get msw to output the schema of it's handlers? I can only think to manually write out the schema in a .graphql file based off what I'm inputting into msw

Slightly related to #1396 but starting another server seems overkill for my usage; I'm more interested in just the typing for easy development

[andykenward]

Have you looked at @graphql-codegen/typescript-msw ?

[drewbitt]

That would generate msw handlers from a schema. It would still require manually writing out the schema. Useful if I wanted to go that route.

[andykenward]

Er but MSW is mocking a server's responses. It's not for implementing a server.

Are you only writing MSW GraphQL handlers?

[drewbitt]

I am only writing MSW graphql handlers as part of a POC/demo app, yes.

[kettanaito]

Hey, @drewbitt. Allow me to clarify: you're doing something akin to a mock-first development, where you have a bunch of request handlers written in MSW but there's no actual GraphQL server/schema present yet. So you want to take your mocks and turn them into a schema. Is that correct?

If that's the case, I don't think there's an easy way of doing that. You can always write a parser that analyzes your handlers and builds an AST of GraphQL schema in JavaScript syntax (if that's what you want in the first place) but that's time-consuming. Moreover, MSW is not a reliable source of truth for GraphQL schemas. It would involve a lot of value inference to figure out what your data intention is based on request handlers alone.

I would recommend doing the following: write a GraphQL schema manually. If you need a schema, it means you have plans on using it further. Writing it explicitly will give you the best control and the best end result. Then, you can gradually convert your request handlers to resolve against the schema instead of returning fixed data:

msw/test/graphql-api/compatibility.node.test.ts

Lines 18 to 33 in 7380011

	graphql.query('GetUser', async (req, res, ctx) => {
	const executionResult = await executeGraphql({
	schema: buildSchema(schema),
	source: req.body.query,
	rootValue: {
	user: {
	firstName: 'John',
	},
	},
	})
	return res(
	ctx.data(executionResult.data),
	ctx.errors(executionResult.errors),
	)
	}),

You can wrap the executeGraphQL into a utility function that abstracts the logic away from your handlers, only accepting the input (mock) data for the rootValue property.