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

I am still having this issue

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

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.

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

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

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
});

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

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

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

@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

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

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 😉

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

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

Is this problem solved somehow?