Mocking with 2.0

Hi all,

First of all, I love Apollo Client; big thanks to the dev team.

Form responses:

Intended outcome: upgrade from react-apollo 1.2 to 2.0 Actual outcome: I have no idea how to mock anything anymore How to reproduce the issue: Attempt to find information about mocking with 2.0 Versions: as above

Discursive account:

I’ve had to upgrade to 2.0 (react-apollo) by the lack of (remaining) documentation on how to silence the heuristic fragment matcher warning. (The documentation I can find concerns 2.0).

After having carefully rewritten my initialization code to allow use createHttpLink and friends, I am mystified (and cannot find documentation) on how to do mocking. I have several hundred lines of code specifying a mock NetworkInterface, as per the old docs.

What’s the new equivalent to mockNetworkInterfaceSchema and friends? Is this documented anywhere?

Anyway, grateful for all your hard work and look forward to learning how I can unfsck my codebase, even as I sit anxiously by 😃

[luisgrases]

You can Mock using: https://www.apollographql.com/docs/graphql-tools/mocking.html

You can use that to create a HOC that passes the response to a component through a data prop.

Something like:

import React from 'react'
import schema from 'gql-schema.js'
import { graphql } from 'graphql';
import { makeExecutableSchema, addMockFunctionsToSchema } from 'graphql-tools';

const executableSchema = makeExecutableSchema({ typeDefs: schema });
addMockFunctionsToSchema({ schema: executableSchema });

const GQLMockHOC = (query) => (Component) => 
  class GQLMock extends React.Component {

    constructor(props) {
      super(props);
      this.state = { data: null}
    }

    async componentWillMount() {
      const response = await graphql(executableSchema, query)
      this.setState({ data: response.data })
    }

    render() {
      const { data } = this.state
      return (data) ? <Component data={data} {...this.props} /> : <div>Loading</div>
  }

}

export default  GQLMockHOC

Take in account that you need to change the schema import to actually import your own schema.

Then you can use it like:

const query = `
  query Books {
    books { id, title, description }
  }
`;

const ComponentWithData = GQLMockHOC(query)(MyComponent)

ComponentWithData will have a data prop with the fake response.

[n1ru4l]

Does this help you? https://github.com/apollographql/react-apollo-error-template/tree/b1c8e690ddec5d6a0f2723c2a705ff6913566ee4/src/graphql