React-apollo: Apollo MockedProvider with client directives

[KamalAman]

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

• [email protected]
• [email protected]

[Rafe]

Faced the same problem, created a branch to integrate apollo-link-state with it.

https://github.com/Rafe/react-apollo/commit/1979d07ad2290856f7db3f8a0133002bf71f8cc8

In this commit, I added the clientState props to MockedProvider, and add state-link to the client inside MockedProvider, and it fits my need to test a complex component.

Open the links for passing the state link is also an option and can drop the apollo-link-state support.

Any thought?

[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)

[city41]

When using apollo-client 2.4.8 and react-apollo 2.4.0, MockedProvider handled @client directives correctly for us. Upon upgrading to 2.5.1, we find it now ignores them and does not resolve them.

I have a small query like this:

query isLoadingQuery {
    loadingStatus @client {
        isLoading
    }
}

and a test like

const mock = {
    request: {
        query: isLoadingQuery
    },
    result: {
        data: {
            loadingStatus: {
                isLoading: true
            }
        }
    }
};

describe('Pace', function() {
    it('should render pace when loading', function() {
        const wrapper = mount(
            <MockedProvider mocks={[mock]} addTypename={false}>
                <ApolloPace height={25} />
            </MockedProvider>
        );

        expect(wrapper.children().html()).toBeNull();

        return waitForExpect(() => {
            wrapper.update();
            expect(wrapper.children().html()).not.toBeNull();
        });
    });
});

This test used to pass before the upgrade. Now I can only get it to pass by removing @client directive from the query doc

[nshoes]

@city41 having the same issues. Asked on Spectrum a few days ago but no response :( @hwillson?

[nshoes]

Related: https://github.com/apollographql/graphql-tools/issues/916

[hwillson]

This was fixed in https://github.com/apollographql/react-apollo/pull/2524, and will be included in the next react-apollo release. We're hoping to push a new version out later today / tomorrow.

[nshoes]

Y A S

Awesome, thanks.

[nshoes]

@hwillson any chance it'll be released today?

[hwillson]

Fixed in https://github.com/apollographql/react-apollo/pull/2524. Thanks!

[pdemarino]

I am still having this issue with this setup:

├─ @apollo/[email protected]
├─ @apollo/[email protected]
│ ├─ @apollo/react-common@^3.0.1
│ ├─ @apollo/react-hooks@^3.0.1
├─ @apollo/[email protected]
│ ├─ @apollo/react-common@^3.0.1
│ ├─ @apollo/react-components@^3.0.1
├─ @apollo/[email protected]
│ ├─ @apollo/react-common@^3.0.1
├─ @apollo/[email protected]
│ ├─ @apollo/react-common@^3.0.1
│ ├─ @apollo/react-hooks@^3.0.1
├─ @apollo/[email protected]
│ ├─ @apollo/react-common@^3.0.1
├─ @apollographql/[email protected]
│ └─ [email protected]
├─ @apollographql/[email protected]
├─ [email protected]
│ ├─ apollo-cache-inmemory@^1.6.3
│ ├─ apollo-cache@^1.3.2
│ ├─ apollo-client@^2.6.4
│ ├─ apollo-link-error@^1.0.3
│ ├─ apollo-link-http@^1.3.1
│ ├─ apollo-link@^1.0.6
├─ [email protected]
│ ├─ [email protected]
├─ [email protected]
│ ├─ apollo-cache@^1.3.2
│ ├─ apollo-utilities@^1.3.2
├─ [email protected]
│ ├─ apollo-utilities@^1.3.2
├─ [email protected]
│ ├─ [email protected]
│ ├─ apollo-link@^1.0.0
│ ├─ [email protected]
├─ [email protected]
│ ├─ [email protected]
│ └─ [email protected]
├─ [email protected]
├─ [email protected]
│ ├─ [email protected]
│ ├─ apollo-graphql@^0.3.3
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ @apollographql/apollo-tools@^0.4.0
│ ├─ [email protected]
│ └─ [email protected]
├─ [email protected]
├─ [email protected]
│ ├─ [email protected]
├─ [email protected]
│ ├─ apollo-link-http-common@^0.2.14
│ ├─ apollo-link@^1.2.12
├─ [email protected]
│ ├─ apollo-link@^1.2.12
├─ [email protected]
│ ├─ apollo-link-http-common@^0.2.14
│ ├─ apollo-link@^1.2.12
├─ [email protected]
│ ├─ apollo-utilities@^1.3.0
├─ [email protected]
├─ [email protected]
│ ├─ @apollographql/apollo-tools@^0.4.0
│ ├─ @apollographql/[email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ │ ├─ @apollographql/apollo-tools@^0.4.0
│ │ ├─ [email protected]
│ │ └─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│ ├─ @apollographql/[email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
├─ [email protected]
│ └─ [email protected]
├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ └─ [email protected]
├─ [email protected]
│ ├─ [email protected]
├─ [email protected]
│ ├─ @apollo/react-testing@^3.0.0
│ ├─ apollo-boost@^0.4.3
│ ├─ react-apollo@^3.0.0
│ ├─ apollo-server-lambda@^2.8.1
│ ├─ @apollographql/apollo-tools@^0.4.0
│ ├─ [email protected]
│ └─ [email protected]
│ ├─ apollo-link@^1.2.3
│ ├─ apollo-utilities@^1.0.1
├─ [email protected]
│ ├─ @apollo/react-common@^3.0.1
│ ├─ @apollo/react-components@^3.0.1
│ ├─ @apollo/react-hoc@^3.0.1
│ ├─ @apollo/react-hooks@^3.0.1
│ └─ @apollo/react-ssr@^3.0.1

[Paddy-Hamilton]

I am also seeing a @client warning and not the expected behaviour so my test fails
I have all the latest versions

    "apollo-boost": "^0.4.4",
    "apollo-cache-inmemory": "^1.6.3",
    "apollo-client": "^2.6.4",
    "apollo-link": "^1.2.12",
    "apollo-link-error": "^1.1.11",
    "apollo-link-http": "^1.5.15",
    "apollo-link-state": "^0.4.2",
    "@apollo/react-hooks": "^3.0.1",
    "@apollo/react-ssr": "^3.0.1",
    "@apollo/react-testing": "^3.0.1",

Query

query EDIT_CAKE_MODAL_OPEN {
  editCakeModalOpen @client
}

Test

import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render } from "@testing-library/react";
import { MockedProvider } from "@apollo/react-testing";
import { fakeCake } from "../../lib/testUtils";
import EditCakeModal from "./index";
const cake = fakeCake("ASD123");
const defaultProps = {
  ...cake
};
import { EDIT_CAKE_MODAL_OPEN } from "../../graphql/queries.graphql";

const mocks = [
  {
    request: {
      query: EDIT_CAKE_MODAL_OPEN
    },
    result: {
      data: {
        editCakeModalOpen: true
      }
    }
  }
];
describe("<EditCakeModal/>", () => {
  test("renders when open", () => {
    const { container, queryByLabelText } = render(
      <MockedProvider mocks={mocks} addTypename={false}>
        <EditCakeModal {...defaultProps} />
      </MockedProvider>
    );
    expect(queryByLabelText("Name")).not.toBeInTheDocument();

    expect(container).toMatchSnapshot();
  });
});

warning
Found @client directives in a query but no ApolloClient resolvers were specified. This means ApolloClient local resolver handling has been disabled, and @client directives will be passed through to your link chain.

[DenVilden]

For someone who still experience this problem, adding __typename solved it for me