React-apollo: Query from cache makes component render twice

[vladshcherbin]

Intended outcome:

Example app has a TopComponent, which executes query. This component has a nested BottomComponent, which also executes the same query.

I expect BottomComponent to render only once since data is fetched from cache or at least to have some kind of loading / complete state.

Actual outcome:

TopComponent executes query. When loading prop is false, BottomComponent is rendered. It takes query from cache and renders the same component twice with the same props.

How to reproduce the issue:

The app is as simple as that:

// App
const App = () => {
  const networkInterface = createNetworkInterface({
    uri: 'http://admin.localhost:3000/graphql'
  })
  const apolloClient = new ApolloClient({ networkInterface })
  const store = configureStore(apolloClient)

  console.log('render app')

  return (
    <ApolloProvider store={store} client={apolloClient}>
      <TopComponent />
    </ApolloProvider>
  )
}

// TopComponent
const TopComponent = ({ data: { loading, error } }) => {
  console.log('render top component', loading, error)
  if (loading) {
    return <p>loading</p>
  }

  if (!loading && error) {
    return <p>error</p>
  }

  console.log('before render bottom component')
  return (
    <BottomComponent />
  )
}

export default graphql(query)(TopComponent)

// BottomComponent
const BottomComponent = ({ data: { loading, error } }) => {
  console.log('render bottom component', loading, error)

  return (
    <p>bottom component</p>
  )
}

export default graphql(query)(BottomComponent)

The result output:

As you can see, BottomComponent renders twice with the same props.

Version

• [email protected]
• [email protected]

[lostpebble]

Yep running into this issue as well it seems. Causing havok trying to get CSS-in-JS styles working with fela - as the style renderer creates different stylesheets on each render now which collide with each other and the styles get all muddled.

I'm pretty sure this is also related to the previous issue I created #996 , where I noticed two renders being enacted on both server and client.

I uploaded an example project that shows it happening, here: https://github.com/lostpebble/apollo-two-render

[stale[bot]]

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[vladshcherbin]

What a useless bot, wow. What activity do you expect, it's an issue tracker, not a chat room.

[stale[bot]]

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[ducarroz]

I am experiencing the same issue!

Looks like GraphQL subscribes to the query on GraphQL.componentDidMount which will force a render once the subscription returns data (via next). This despite it already got the query result when calling GraphQL.dataForChild during the initial GraphQL.render.

[stale[bot]]

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[ex3ndr]

Any news?

[garethbradley]

+1 - I'm getting two calls to every Mutation and Query

[janzheng]

same, no idea how to solve. No idea if a Vue problem or not, but it's hard to track down

[jameskennethrobinson]

Would love some news on this issue!

[ghost]

+1

[ghost]

Maybe something like this? https://github.com/apollographql/react-apollo/issues/1718

[Kisepro]

No news ?

[kcouliba]

I encountered that kind of issue recently using the Query Component and reading the documentation I noticed I was using the fetchPolicy: 'cache-and-network'.
That configuration makes the component render with cached data, then triggers the loading, then renders again with fresh data from the server.
Going with fetchPolicy: 'network-only' did the trick in my case.
I hope this could help.

[GarretRCorbett]

I found this thread because I had a similar issue where I had 3 components on a view where the top component would conditionally render which of my bottom two components were displayed. Within those 2 bottom components though, I had a componentWillMount() function that fetched the data I needed :

componentWillMount() {
    this.props.dispatch(fetchAllObjectiveDataWithRedux())
    this.props.dispatch(fetchAllNotesDataWithRedux())
}

After reading the comment by @kcouliba I realized my mistake and removed my componentWillMount()functions from within the bottom two components to a new wrapper component that wrapped all 3 of my components. It was a simple fix that solved this issue for me. Hopefully this will help anyone else who stumbles across this thread having the same issue.

[hebuliang]

Did not get this issue with apollo-client "^2.3.5" and react-apollo@^2.1.8

[zenVentzi]

Getting the issue with apollo-client "^2.3.5" and react-apollo@^2.1.9

[TacticCoder]

Any news?

[zxfred]

same

[llezhava]

Any news?

[mixed]

meet same issue.

[dipta007]

Any news on this?

[indieocean]

1+

[hjaltiunnar]

+1

[danielbischoff]

+1

[carlosalvarez91]

+1

[maabed]

+1

[laurenmayers]

+1

[djemeljanovs]

+1

[austincondiff]

+1

[bke-daniel]

+1

[praisegeek]

+1

[creadoit]

+1

[mpgon]

Same. When migrating from "apollo-client": "2.4.2" to "2.5.1"

[jasonpaulos]

It would be very helpful if someone could provide an up-to-date reproduction of this issue, either as a github repo or in codesandbox.io. Thanks!

[vladshcherbin]

Here is a reproduction of a very similar example I had when opened this issue:

• react-apollo 2.1.0, issue exists (original test was on 1.4.15)
  https://codesandbox.io/s/react-apollo-issue-reproduction-210-s0y2d

• react-apollo 2.1.1, issue doesn't exist in this example
  https://codesandbox.io/s/react-apollo-issue-reproduction-211-rbis9

• react-apollo 2.5.6, issue doesn't exist in this example
  https://codesandbox.io/s/react-apollo-issue-reproduction-256-j7p85

So, the initial example doesn't have this issue, seems to be fixed.

Maybe someone else can use this reproductions and add an example where it's not working as expected.

[bke-daniel]

I made a fork of @vladshcherbin last example. Added cache and used HOCs so that we're having the same setup as in our app (updated everything to latest).
For me / us the issue seems to be solved too  – double checked it with our app.
See: https://codesandbox.io/s/react-apollo-issue-reproduction-256-mch43

Thank you!

EDIT: Made a few things more real life-ish, e.g. mixture of PureComponents and Memo etc.)

[mpgon]

@jasonpaulos here's an isolated example. https://codesandbox.io/embed/mocked-apollo-pl90t
My problem specifically occurs under a MockedProvider with no mocked responses for a query, using apollo-client 2.6.3 If you open the console you'll see the output

loading: true, error: false, data: {} 
loading: false, error: true, data: undefined 
loading: false, error: true, data: undefined 

showcasing the extra loading: false, error: true render. However, if you go to the dependencies on the left and change the apollo-client version to, for example, 2.4.2, you can see the component logs the expected output

loading: true, error: false, data: {} 
loading: false, error: true, data: undefined 

[hwillson]

React Apollo has been refactored to use React Hooks behind the scenes for everything, which means a lot has changed since this issue was opened (and a lot of outstanding issues have been resolved). We'll close this issue off, but please let us know if you're still encountering this problem using React Apollo >= 3.1.0. Thanks!

[bantingGamer]

React Apollo has been refactored to use React Hooks behind the scenes for everything, which means a lot has changed since this issue was opened (and a lot of outstanding issues have been resolved). We'll close this issue off, but please let us know if you're still encountering this problem using React Apollo >= 3.1.0. Thanks!

This is still an issue. i have upgraded to all the latest packages.
I dont understand why it just doesn't work like expected. HOC cache-and-network causes my component to mount twice and then my subscriptions subscribe twice which is not the behavior im looking for. please can anyone give me a work around?

[bantingGamer]

if anyone is still struggling with the issue i found a work around by using a hook instead of a HOC. The hook has a callback executed once your query successfully completes. onCompleted. And it only mounts once. I then subscribe to my subscriptions and there is no duplicate subscription that occurs. it only happens once. Ive provided my code example. good luck!

import {
  useQuery,
  useApolloClient
} from '@apollo/react-hooks';

  const { loading, error, data } = useQuery(meQuery, {
    fetchPolicy: 'cache-and-network',
    onCompleted: () => subscribeToSubscriptions()
  });

[Sergio16T]

Working with Next.js 9.3.3 and React Apollo 3.1.3 I'm also experiencing this

[collegewap]

Even I am experiencing the same with apollo-client 2.6.10 and next 9.4.4

Here is an example: https://github.com/collegewap/next.js/tree/canary/examples/with-apollo

This is forked from the official example of Nextjs and added just the logs

Demo: https://nextjs-apollo-issue.vercel.app/

When you click on load more, the component renders thrice. Whereas it should render only twice, once while loading and once after loading.