# Mocking entire GraphQL queries - Wed 16th September, 2020

J and I have continued to build out our mocks for all of C+'s feed calls using the excellent [factory.ts](https://github.com/willryan/factory.ts) and [faker.js](https://github.com/marak/Faker.js/) libraries. In conjunction with Apollo Client's [MockedProvider](https://www.apollographql.com/docs/react/development-testing/testing/), we've been able to mock the response to any of our GraphQL queries. After a bit of work creating the mocks, this has so many advantages such as not having to wait on API requests each time, ability to generate huge amounts of fake data to check how your UI looks and check performance, reuse in unit tests, and more.

1. Wrap providers:

 <ThemeProvider theme={theme}>
            {useMocks ? (
                <MockedProvider
                // mocks already imported here for brevity
                    mocks={[feedQuery, commentsQuery]}
                >
                    <>{children}</>
                </MockedProvider>
            ) : (
                <ApolloProvider client={client}>{children}</ApolloProvider>
            )}
        </ThemeProvider>

2. Create your mocks:

import * as Factory from 'factory.ts'
import faker from 'faker'

// GraphQL query
import { GET_REACTIONS } from 'blah'

// TS types
import {
    Query as ReactionsQuery,
    SrwReactions_Reaction,
    SrwReactions_User,
} from 'blah'

import { MockedResponse } from '@apollo/client/testing'

// create factories
export const SrwReactions_UserMock = Factory.Sync.makeFactory<SrwReactions_User>({
    __typename: 'SrwReactions_User',
    id: Factory.each(() => faker.random.uuid()),
    firstName: Factory.each(() => faker.name.firstName()),
    lastName: Factory.each(() => faker.name.lastName()),
    avatarUrl: Factory.each(() => faker.image.avatar()),
})

export const SrwReactions_ReactionMock = Factory.Sync.makeFactory<SrwReactions_Reaction>({
    __typename: 'SrwReactions_Reaction',
    reactionId: Factory.each(() => faker.random.number({ min: 1, max: 6 })),
    user: Factory.each(() => SrwReactions_UserMock.build()),
})

// export mock
export const reactionQuery: MockedResponse<ReactionsQuery> = {
    request: {
        query: GET_REACTIONS,
        variables: {
            feedItemId: '123',
        },
    },
    result: {
        data: {
            srwReactions: {
                reactions: SrwReactions_ReactionMock.buildList(40),
            },
        },
    },
}

3. Pass the `useMocks` flag to enable mocks. Use app as normal.

There are some gotchas. Your query in your component needs to **exactly** match the mocked query. This means variables must be the same, so watch out for things like paginated queries, where the variables are changing often.

If you don't include a `__typename` in your mocks, [you need to use pass the addTypename prop to your MockedProvider](https://www.apollographql.com/docs/react/development-testing/testing/#addtypename).

###### tags: `programmingjournal` `2020` `C+` `mocks` `factory` `mockedprovider` `graphql` `faker` `apolloclient`