profile
viewpoint

Ask questionsApollo MockedProvider with client directives

Intended outcome: When using a MockedProvider and a query with client directives, the client directives should resolve

Actual outcome:

Client directives are unrecognized and console warns a message. There does not seem a way to specify apollo-link-state on the MockedProvider, which means any component using a client directive in its query is not really testable.

How to reproduce the issue: Use a @client in a query, and then run the mockedProvider, the client directive will not be resolved.

Version

  • apollo-client@2.4.2
  • react-apollo@2.1.9
apollographql/react-apollo

Answer questions jhpedemonte

I was able to get this working using the cache property for MockedProvider. If set, it's used as the cache for the ApolloClient instance that is created. Here's some pseudo-code of what I got working:

const cache = new InMemoryCache().restore({
  ROOT_QUERY: {
    someQueryName: {
      type: 'id',
      id: 'SOME-QUERY-NAME-ID',
      generated: false,
    },
  },
  'SOME-QUERY-NAME-ID': {
    a: 1,
    prop: true,
    or: 'hello',
    two: 3,
    __typename: 'SomeQuery',
  },
});

render(
  <MockedProvider cache={cache}>
    <ComponentWhichMakesSomeQuery />
  </MockedProvider>
);

(Hope that makes sense)

useful!
source:https://uonfu.com/
answerer
Javier Pedemonte jhpedemonte IBM Austin, TX Full-stack developer working on emerging technologies. Particular emphasis on user interface and user experience (UI/UX).
Github User Rank List