useQuery causes a component to render multiple times about react-apollo-hooks

[dubcs]

I am still having this issue

[Alexandredc]

I have the same problem.
useQuery causes 2 renders even if the query result is already cached.

[adjourn]

Have you tested this with environment set to production? It might not be the reason here but React renders components that use hooks twice for dev/safety reasons when environment isn't production.

[ppsirius]

I'm using newest "@apollo/client": "3.0.0-beta.43" and still some additional rerenders happend. After disabling React.StrictMode works fine.

[SafiUllahAshfaq]

you can pass in {enabled: false} like following and it disables extra re-rendering
useQuery('key', () => axios.get(), {enabled: false};

[rares-lupascu]

guys please be aware of React.StrictMode ... it will add a couple of extra renders :) ... in my case they jumped from 2 to 6 :)

[robertvorthman]

useQuery renders twice for me when I use fetchPolicy: 'cache-only'. Using 'cache-first' produces just one render.

const { data } = useQuery(GET_DATA, {
  fetchPolicy: 'cache-only' //causes second render
});

[SyedAsimAliSE]

This is still happening ! any one got solution to this problem ?

[imadldn]

useQuery("Key", () => getData(), {refetchOnWindowFocus: false})
This should solve the issue.

[hipdev]

Hello guys :) , I will leave this little help here, what I am doing is using the useApolloClient with useEffect and useState for cases when I need to do stuff with other hooks like for example a form who use a hook to load initial values, is working fine and just renders once, check:

... more imports 
import React, { useEffect, useState } from 'react';
import { useApolloClient } from 'react-apollo-hooks';


const StartService = ({ id }) => {

  const client = useApolloClient();
  const [collections, setCollections] = useState([]);
  const [service, setService] = useState({});
  const [submitting, setSubmitting] = useState(false);

  const [formState, { text, select }] = useFormState();

  useEffect(() => {
    getCollectionType();
    getService();
  }, []);

  const getService = async () => {
    if (id) {
      const {
        data: { getService },
      } = await client.query({
        query: GET_SERVICE_QUERY,
        variables: { id },
      });

      setService(getService);

      if (getService) {
        formState.setField('source', getService.source || '');
        formState.setField('record', getService.record || '');
        formState.setField('licensePlate', getService.licensePlate || '');
      }
    }
  };

  const getCollectionType = async () => {
    const {
      data: { collectionsType },
    } = await client.query({
      query: COLLECTIONS_TYPE_QUERY,
    });

    setCollections(collectionsType);
  };

return (...)

Renders just once, just how I like it 😉

[JClackett]

Should be using the official Apollo react hooks by now man!

[clovisdasilvaneto]

@ppsirius I'm not using Strict Mode on my app, just did a very fresh example using CRA and I still have the same problem

[Alexandredc]

This issue doesn't exist on @apollo/react-hooks@beta

[amkazan]

Same here! Not using Strict Mode. Still have 2 renders after a mutation!!!

[juicylevel]

Is this problem solved somehow?

[fbartho]

Render with cache-data, render while loading, render with data-result = 3 times. -- That makes sense to me! How many times would you expect it to render? @asfwebmaster

[frangolet]

Hm, I have just updated with: console.log(data, error, loading);
and the result is:

Object {dog: Object}
dog: Object
images: Array[169]
__typename: "Dog"
undefined
false
---------------------
Object {dog: Object}
dog: Object
images: Array[169]
__typename: "Dog"
undefined
false
---------------------
Object {dog: Object}
dog: Object
images: Array[169]
__typename: "Dog"
undefined
false

So the loading part is false and all other props are same for all renders, this seems a bit strange. @fbartho

[mbrowne]

It looks like this issue has something to do with suspense. I was able to find a limited workaround by using React.memo:

  <Suspense fallback={<div>Loading...</div>}>
    <MyComponent />
  </Suspense>
...
const MyComponent = React.memo(() => {
  const { data, error } = useQuery(QUERY)
  if (error) {
    return `Error! ${error.message}`; 
  }
  return 'MyComponent'
})

In that case, MyComponent renders only once. But this seems to break if you pass children, e.g.:

  <Suspense fallback={<div>Loading...</div>}>
    <MyComponent>{props.children}</MyComponent>
  </Suspense>
...
const MyComponent = React.memo(({ children }) => {
  const { data, error } = useQuery(QUERY)
  if (error) {
    return `Error! ${error.message}`; 
  }
  return children
})

[aadamsx]

Any word on this?

[yantakus]

Have anyone found a solution or a workaround except using React.memo which doesn't help to fully avoid the issue? This behavior makes my app very slow, because heavy components rerender multiple times without the need.

[yantakus]

@adjourn I think you meant this behaviour. But this happens only if <React.StrictMode> is enabled. I don't use Strict Mode and I still have lots of rerenders. So this is not the case here.

[JClackett]

Even in production the query causes my component to re-render 4 times, which is two more than expected right? @apollo/react-hooks doesn't have this issue, but i'm having other issues that mean i still can't use that :(

[JClackett]

use @apollo/react-hooks :)

[twelve17]

@JClackett Are you no longer having the other issues that prevented you from using @apollo/react-hooks?

[JClackett]

@twelve17 @apollo/react-hooks works for me now, so have been using that in all my projects

[SyedAsimAliSE]

Should be using the official Apollo react hooks by now man!

Ahhh, my bad; i was so much tired to even check the package name ! :P
i am using the official one.

[sujed]

For me also was the problem React.StrictMode

[torontochen]

same here

[clovisdasilvaneto]

Did someone found a way to solve this problem? I'm also facing this issue.

[ppsirius]

Remove Strict Mode Hoc but is just a workaround ;)

[pgriscti]

useQuery(yourQuery, { fetchPolicy: 'no-cache' })