Fragment fields do not work in tests with MockedProvider

Intended outcome: Queries with fragments should pass through all fragment fields in tests.

Actual outcome: Queries with fragments in tests do not pass through the fields from the fragment.

How to reproduce the issue: I have the following fragment + query.

const FRAG= gql`
  fragment FooFields on Foo {
    id
    foobar {
      id
    }
  }
`

const QUERY = gql`
  ${FRAG}
  query fetchFoo (id: ID!) {
     fetchFoo(id: $id) {
       ...FooFields
     }
  }
`

where the query’s schema looks like:

  type Foobar {
     id: ID!
  }
  type Foo {
     id: ID!
     foobar: Foobar!
  }
  extend type Query {
    fetchFoo(id: ID!): Foo!
  }

Performing the query in a jest test with the following:

const fragmentDefaultOptions: DefaultOptions = {
  watchQuery: { fetchPolicy: "no-cache" },
  query: { fetchPolicy: "no-cache" },
};

const mocks = [
  {
    request: {
      query: FETCH_FOO,
      variables: {
        id: "some-foo",
      },
    },
    result: {
      data: {
       fetchFoo: {
         id: "some-foo",
        foobar: {
          id: "some-foobar",
        }
      },
    },
  },
];

...  = render(
      <MockedProvider
        mocks={mocks}
        addTypename={false}
        defaultOptions={fragmentDefaultOptions}
      >
          <SomeComponent />
      </MockedProvider>
)

where SomeComponent performs the call:

  const {
    data,
    error,
    refetch,
    loading,
  } = useQuery(FETCH_FOO, {
    variables: {
      id: fooId,
    },
    fetchPolicy: "cache-and-network",
  });

It seems like if I use ...FooFields, then data.fetchFoo is an empty object in the test only. If I inline the fields:

const QUERY = gql`
  query fetchFoo (id: ID!) {
     fetchFoo(id: $id) {
       id
       foobar {
         id
       }
     }
  }
`

then it works fine both in tests and in the actual app.

Versions

  System:
    OS: Linux 4.19 Ubuntu 20.04.1 LTS (Focal Fossa)
  Binaries:
    Node: 15.0.1 - ~/.nvm/versions/node/v15.0.1/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 7.0.3 - ~/.nvm/versions/node/v15.0.1/bin/npm
  Browsers:
    Firefox: 84.0
  npmPackages:
    @apollo/client: ^3.2.5 => 3.2.5

[benjamn]

@richardwu Your mocked result objects need __typename fields, so the fragment constraint on BudgetLineItem can match against those objects. Unless you’re using interfaces or unions (which bring possibleTypes into play), that type will most likely have the same name as the fragment constraint: __typename: "BudgetLineItem". When in doubt, just ask what your server would return, and try to approximate that with your mock data.

Since Apollo Client requests the __typename field automatically, and every GraphQL server knows how to provide a __typename for any object type, it’s easy to forget how important that information is when you’re mocking data, but object type information has wide-reaching consequences, not just for fragment matching but many other type-driven client/cache behaviors. If __typename is missing from your mock data, you’re not really testing the same behavior that happens outside of your tests, even if the tests are passing.

[pimmee]

I’ve spent countless hours struggling with this, and if anyone is running into the same issue: For some reason including the fragment before the query fails when using MockedProvider.

This DOES NOT work:

export const GET_PRESCRIPTIONS = gql`
  ${PrescriptionFragment}
  query GetPrescriptions($patientId: ID!) {
    prescriptions(patientId: $patientId) {
      ...PrescriptionInfo
    }
  }
`;

This DOES work:

export const GET_PRESCRIPTIONS = gql`
  query GetPrescriptions($patientId: ID!) {`
    prescriptions(patientId: $patientId) {
      ...PrescriptionInfo
    }
  }
  ${PrescriptionFragment}
`;