apollographql / react-apollo

:recycle: React integration for Apollo Client
https://www.apollographql.com/docs/react/
MIT License
6.85k stars 790 forks source link

useLazyQuery executed multiple times #4019

Open squarewave24 opened 4 years ago

squarewave24 commented 4 years ago

i have a simple hook component that looks like this

export function DownloadTestData(props) {
  const [getTestData, { loading, error, data }] = useLazyQuery(QUERY_TEST);
  if (data)
     saveAsCsv(data)

  return <Button onClick={getTestData}>export</Button>

it works as expected, except, when the row that contains DownloadTestData component get's re-rendered, it re-runs above function with data still available, so the save executes multiple times (once on click, and all subsequent re-renders of that component)

am i using it incorrectly? how come data remains populated on subsequent re-renders? i need it to trigger only once when getTestData was executed

data is also there for all useEffect hooks subsequent to onClick action.

millievn commented 4 years ago

the saveAsCsv function should be placed in useLazyQuery's onCompleted. Search onCompleted in https://www.apollographql.com/docs/react/data/queries/#usequery-api.