Return only fields requested in GQL query

[kgpax]

Scope

Improves an existing behavior

Compatibility

• This is a breaking change

Feature description

This has already been raised in #292, but the answer and conversation went down the track of schema-based mocking to automatically supply fields values based on their type, rather than limiting the response to the requested fields.

However, as @benmonro had asked, I was wondering whether it was possible or whether there was a known way to allow mock resolvers to return a full object graph of the data being fetched, and strip fields in the response data such that only those included in the query are present.

For example.

If I have a mock resolver which returns all possible data for a given GQL schema type (note that the schema is not known to msw):

export const handlers = [
  graphql.query('GetUser', (req, res, ctx) => {
    return res(ctx.data({
      user: {
        id: '1',
        firstName: 'Jane',
        lastName: 'Doe',
        address: {
          line1: '123 Fake Street',
          line2: 'Faketown',
          city: 'Fakesville',
          state: 'FK'
        }
      }
    })
  })
]

I could then have a query in my app as follows:

query GetUser {
  user {
    id
    firstName
    address {
      line1
      city
    }
  }
}

Ideally, I would like the response from msw to include only those properties, rather than the whole object graph:

{
  "user": {
    "id": "1",
    "firstName": "Jane",
    "address": {
      "line1": "123 Fake Street",
      "city": "Fakesville"
    }
  }
}

Ideally this would also factor in fragments and directives:

query GetUser(
  $fullName: Boolean!
  $fullAddress: Boolean!
) {
  user {
    id
    firstName
    lastName @include(if: $fullName)
    address {
      ...addressFields
    }
  }
}

fragment addressFields on Address {
  line1
  line2 @include(if: $fullAddress)
  city
  state @include(if: $fullAddress)
}

Is this something that is on your roadmap, or does anybody know of another library or utility which can take a JSON object and reduce its fields to ones described in a GQL query?

Many thanks, and love your work by the way ❤️

[kettanaito]

Hey, @kgpax. Thanks for raising this.

Filtering out only the requested fields is done by the server, and more specifically, by passing the full resolved payload through the graphql package, where it also does a few other things like field value validation, directives, etc. This is too much for MSW to ship as default behavior, and even as an opt-in behavior.

We did, however, provide an example of how you can achieve the fields filtering identical to an actual server:

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

Lines 19 to 34 in 6c6e119

	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 run graphql() in the resolver, provide it with the query and variables of the intercepted request, and also include the schema. Without the schema, GraphQL doesn't know how to filter or validate your fields. By doing this, you will get the filtering that you're talking about.

[kgpax]

Amazing - thank you; works a charm.

I had been trying to find the graphql internal functions to parse and resolve based on query, but the missing piece for me was including the schema. I was originally hoping to avoid using the schema since (a) it belongs in a different application and (b) I wanted to have the capability of mocking new fields and types before they were included in the schema (for PoCs).

However, for (a) I can use codegen tools to pull the schema into my app, and for (b) I'll just have to get creative with an approach to doing it.

[kettanaito]

You list valid ways to work around your limitations. GraphQL schema is generally an artifact that you should be able to generate (or write yourself) and share as a static asset. Mocking fields that are not in the schema is possible with MSW but you'd lose "return only requested fields" feature then. GraphQL can't return arbitrary fields not defined in the schema, it won't even query them, raising an exception. That being said, keep in mind that you are in charge of your response resolver, so nothing stops you from doing this:

graphql.query('GetUser', async (req, res, ctx) => {
  const { data, errors } = await withGraphQL(req)
  return res(
    ctx.errors(errors),
    ctx.data({
      ...data,
      newFieldNotInSchema: 'John'
    })
  )
})