apollographql / apollo-client

:rocket:  A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
https://apollographql.com/client
MIT License
19.34k stars 2.66k forks source link

useLazyQuery loading and networkStatus when call refetch. fetchMore send two requests #7243

Open Krasnopir opened 3 years ago

Krasnopir commented 3 years ago

Hello. I try to use hook useLazyQuery to filter data with new variables. apollo client config for watch query is fetchPolicy: 'cache-and-network',

  const [getTracks, { data, loading, error, networkStatus, called, refetch }] = useLazyQuery(TracksPageQuery);

  useEffect(() => {
    if (!called) {
      getTracks({ variables: getQueryVariables() });
    } else {
      refetch(getQueryVariables());
    }
  }, [JSON.stringify(urlQueries)]);

When i set new variables at first time - refetch does not trigger loading as true and networkStatus always 7. But refetch with repeated variables return loading true, as i need.

I tried different fetchPolicy setting, and only with 'cache-and-network' and repeated variables returned loading true on refetch. Also it does not suit me to set notifyOnNetworkStatusChange, because i need to show previous result before data will update, and spinner for loading over.

Krasnopir commented 3 years ago

fetchMore also does not return loading true. Only with apollo client settings fetchPolicy: 'cache-and-network', then loading is true after every call. But in this case i have another problem (maybe it must be another issue) - fetchMore send two requests, first with new variables, and then with start query variables.

 useEffect(() => {
    if (!called) {
      getTracks({ variables: getQueryVariables() });
    } else {
      fetchMore({
        variables: getQueryVariables(),
        updateQuery: (prev, { fetchMoreResult }) => {
          if (!fetchMoreResult) return prev;
          return fetchMoreResult;
        },
      });
    }
  }, [JSON.stringify(urlQueries)]);
LaurenceSM10 commented 3 years ago

Same issue. loading is always false using useLazyQuery

alamothe commented 3 years ago

Same issues:

Giayychan commented 3 years ago

Same issue. ` const [getJobAd, getJobAdRes] = useLazyQuery(GET_JOB_AD);

useEffect(() => { if (router.query.id !== 'new' && router.query.id) getDetail(router.query.id as string); }, [router]);

const getDetail = async (jobAdId: string) => { try { getJobAd({ variables: { id: jobAdId } }); console.log(getJobAdRes, getJobAdRes.loading); } catch (error) { console.log(error); } };`

getJobAdRes ={ "loading": false, "networkStatus": 7, "called": false }

anjopater commented 2 years ago

I have the same issue,

    "@apollo/client": "^3.5.10",
    "@apollo/react-hooks": "^4.0.0",

The loading status change from false to true in the first call, but after that doing refech is always false, and checking the networkStatus it's always 7 so I'm not able to get the loading correct status.