How to use UseQuery with useEffect?

Question

How to use UseQuery in React.UseEffect? this is my simple query

  const {allrecord} = useQuery(ME, {
    onCompleted: ({ meTeacher}) => {
      setUser(meIAM);
      getRecords({
        variables: {
          orgId: meIAM.organization.id,
          pagingArg: {},
        },
      }).then(({ data }) => displayRecord(data.record));
    },
  });
  useEffect(() => {
    console.log(allLocations)
  }, []);

Sundried

Can you explain it in detail? Why do you want to use it inside useEffect? And what's the problem you are facing? – Nl

The problem is I dont know what is the proper use and how to use the useEffect and useQuery – Sundried

Actually, you don't need to put useQuery inside the useEffect. You can use it outside and it's fine. – Nl

so if i want to add another, I just .then(({ data }) => displayRecord(data.record), studentRecord(data.record)) – Sundried

Answer 1

The Apollo Client useQuery hook automatically executes the corresponding query when the component renders. This makes it very similar to executing a query in useEffect with no dependencies. Like:

useEffect(() => {
  const data = executeQuery()
}, [])

There's an alternative hook, useLazyQuery which can be used to execute a query in response to some event, like a button press.

Legible

Answer 2

useQuery is a hook and as such cannot be used under a branch.

This means that you must call useQuery inside your component and not under a branch statement (if/else/switch/useEffect).

If you need to do something with the result of a useQuery just use a useEffect with a dependency on that results

Synder

Answer 3

Good answer here https://github.com/trojanowski/react-apollo-hooks/issues/158

const { loading, data, error } = useQuery(SOME_QUERY)

// If you absolutely need to cache the mutated data you can do the below. But
// most of the time you won't need to use useMemo at all.
const cachedMutatedData = useMemo(() => {
  if (loading || error) return null

  // mutate data here
  return data
}, [loading, error, data])

if (loading) return <Loader />
if (error) return <Error />

// safe to assume data now exist and you can use data.
const mutatedData = (() => {
  // if you want to mutate the data for some reason
  return data
})()

return <YourComponent data={mutatedData}  />

Howarth

Answer 4

Consider using the refetch method in useEffect hook like so

function DogPhoto({ breed }) {
  const { loading, error, data, refetch } = useQuery(GET_DOG_PHOTO, {
    variables: { breed },
  });

  if (loading) return null;
  if (error) return `Error! ${error}`;

  return (
    <div>
      <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
      <button onClick={() => refetch({ breed: 'new_dog_breed' })}>
        Refetch new breed!
      </button>
    </div>
  );
}

Calmative