Apollo-client: Deduplication/Batching not properly handling duplicate queries

[dmarkow]

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

• [email protected]
• [email protected]

[jbaxleyiii]

@dmarkow thanks for the reproduction and details! Since we reworked the entire network stack I had a feeling a bug or two might surface 👍 I'll get right on this fix!

[Wenzil]

Query deduplication not working with HttpLink either

[jbaxleyiii]

@dmarkow @Wenzil this should be fixed via https://github.com/apollographql/apollo-link/pull/242

[jbaxleyiii]

new version of dedup link is release as 1.0.1, I'm going to do a release of AC which removes the hard locked dependencies to make it easy to upgrade parts like this

[jbaxleyiii]

The 1.0.1 build threw a lot of errors on AC tests, I've removed it for now and will keep this issue open until its fixed

[Wenzil]

Any update on this? I've been banging my head against the wall trying to integrate the RetryLink. Turns out it doesn't work really well without query deduplication :{

[jbaxleyiii]

@Wenzil new version is out on npm ([email protected]) and I'm working on a new AC release today with a number of bug fixes.

[jbaxleyiii]

The new dedup link will be part of the next release!

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

[joelaguero]

Also ran into this issue. Even after blowing away my entire node_modules folder, removing yarn.lock, and doing a fresh install - it didn't have the fix. @Wenzil's suggestion to run yarn upgrade apollo-link-dedup@latest fixed it for me, but it'd be better if that fix was integrated by default.

Thank you for all your work!