apollo-client: MockedProvider not returning data when @client is specified

I didn’t know if I should open a new issue or if I should have commented on #4325

Intended outcome: Writing a MockedProvider for a query only with @client directives should return data

Actual outcome: No data is returned when the test is run.

How to reproduce the issue: My test:

const mockLocal = () => [
  {
    request: {
      query: GET_STATE,
      variables: {},
    },
    result: {
      data: {
        renderType: 'default',
        path: '',
        staticContent: {
          navigation: {
            links: [
              {to: '/article', text: 'Article'},
              {to: '/home', text: 'Home'}
            ]
          },
          header: {
            logo: ''
          }
        }
      }
    },
  },
];

describe('<Html>', () => {
  it('renders correctly', async () => {
    const tree = renderer
    .create(<MockedProvider mocks={mockLocal()} addTypename={false}><Router><Navigation/></Router></MockedProvider>)
    .toJSON();
    await wait(0);
    expect(tree).toMatchSnapshot();
  });
});

My query:

export const GET_STATE = gql`
  {
    renderType @client,
    path @client,
    staticContent @client {
      navigation @client {
        links @client {
          to,
          text
        }
      }
     header @client {
        logo
      }
    }
  }
`;

The issue is that when I run the mock, and I console.log in the component that uses the query, the result is an empty object instead of what I specified in result.data

Versions System: OS: Windows 10 Binaries: Node: 11.4.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.13.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: 42.17134.1.0 npmPackages: apollo-client: ^2.5.1 => 2.5.1 react-apollo: ^2.5.1 => 2.5.1

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 7
Comments: 18 (4 by maintainers)

Most upvoted comments

I’m also getting this. Removing the resolvers being added to MockedProvider makes the mocked queries work. However i get the annoying “Found @client directives in a query but no ApolloClient resolvers were specified.” console warning. Furthermore I wonder how to best to test components that use local mutations resolvers if they’re not being added?

Do you think this bug will be fixed? Or should i be testing local apollo things differently? Thanks

axelnormand on Jan 5, 2020

I’m still facing this issue too. Maybe we could do it with the temporary workaround for now, but wanted to ask the same question - if any attention is being paid to this issue, or if anything new came up about it. If it helps, I could also provide my case, but it’s really not that different compared to what is already discussed.

mocantimoteidavid on Mar 6, 2020

Is there any ETA on this? I am relying on @client state for a few critical app components that I can’t test right now :\

Don’t want to put you in a hurry, I just want to know if I have to think about some alternative strategy for testing instead of waiting for a fix.

simonedavico on Mar 25, 2019

@chris-mo The mocked data you pass into MockedProvider fakes out the data Apollo Client would get back through its Apollo Link chain. In other words it’s faking out the data that would come back from making a request to a backend GraphQL API. @client fields are virtual fields, meaning they are never sent through the Link chain, and their data never comes back through the Link chain. In other words, to be able to test @client fields using MockedProvider, you have to provide the data behind them in some other manner, since you can’t provide that data using something like mocks. There are different ways to do this, like providing your own resolvers to return the mocked @client data, or by using typePolicies and a cache instance to do the same thing. You can also write mock data for your @client fields into the cache directly using something like cache.writeQuery(), then make sure you pass that same cache instance into MockedProvider so it’s used when your query runs.

hwillson on Oct 29, 2020

@hwillson thanks! I actually gave this a shot last night, which got rid of the error message mentioned above, but i must have some incorrect syntax as the data returned still returns as undefined

let’s say i have the following query query { state @client { someObject { someValue } } }

The resolver i have for this but seems incorrect is

const resolvers = {
   Query: {
         state() {
               return { ...}
         }

  } 
}

EDIT: I got it to work, just had to edit my return obj. Thanks for the response @hwillson

chris-mo on Oct 29, 2020

Hi @hwillson , @simonedavico - Any updates on this? Running into same problem as above. Thanks!

gcornhill on Jul 1, 2019