Deduplication/Batching not properly handling duplicate queries

Given a single query and using query batching (with apollo-link-batch-http):

const client = new ApolloClient({
  link: new BatchHttpLink({
    uri: "https://api.graph.cool/simple/v1/cj96xwateatkv01264g1xith2"
  })
});

class App extends Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <div>
          <GreetUser id="cj96ydmq34cqj0104r5ddv66a" />
          <GreetUser id="cj96ydmq34cqj0104r5ddv66a" />
        </div>
      </ApolloProvider>
    );
  }
}

class Greeter extends Component {
  render() {
    return (
      <div>
        {this.props.data.loading
          ? "Loading..."
          : `Hi ${this.props.data.People && this.props.data.People.login}!`}
      </div>
    );
  }
}

const query = gql`
  query People($id: ID!) {
    People(id: $id) {
      id
      login
    }
  }
`;

const GreetUser = graphql(query, {
  options: props => ({
    fetchPolicy: "cache-and-network",
    variables: { id: props.id }
  })
})(Greeter);

export default App;

Intended outcome: Executing the query multiple times should properly resolve, so the App component above should display “Hi Dylan!” twice.

Actual outcome: Only the first component using the query resolves. The rest get hung in a loading state. So the App component above displays “Hi Dylan! Loading…”

If I turn set queryDeduplication to false, it works fine. But regardless of it being true/false, both queries are sent to the API server anyway.

After digging into fetchRequest on the QueryManager

• With deduplication enabled
  • Two requests are sent (with a queryId of 1 and 2)
  • The next handler is called twice, but both times on queryId 1
  • So queryId 1 resolves and updates the first component, but queryId 2 never resolves and stays in a loading state
• Without deduplication
  • Two requests are sent (with a queryId of 1 and 2)
  • The next handler is called twice, with queryId 1 and 2
  • Both queries resolve and both components update as expected

How to reproduce the issue:

I threw a create-react-app project together: https://github.com/dmarkow/apollo-batching-issue

Version

• apollo-client@2.0.1
• apollo-link-batch-http@1.0.0

[Wenzil]

Neat! In the meantime I had to yarn upgrade apollo-link-dedup@latest and manually delete the old version from apollo-client’s node_modules. Is there a better way?

[Wenzil]

Query deduplication not working with HttpLink either