should I put useQuery inside a useEffect and should I store returned data in state?

Still wrapping my head around using this library with modern react hooks patterns.

Because data fetching is considered a side effect I’ve seen this pattern a lot in tutorials and docs.

const [data, setData] = useState([]);
  useEffect(() => {
    fetch("http://localhost:3001/links/")
      .then(response => response.json())
      .then(data => setData(data));
  },[]);

Should I be doing a similar pattern with this library? ie putting useQuery in useEffect and storing the data returned from useQuery inside useState

Or can I simply just use useQuery as is and directly access the data returned in my components.

Lets assume I’m just building a simple todo app where I want to create, update and delete todo items.

[jinshin1013]

I don’t store return data from query to react state. I just feel like that’s an anti-pattern. You should just use the returned data as it is like below:

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}  />

But if you must store the returned data, could do below:

const { loading, data, error } = useQuery(SOME_QUERY)
const [state, setState] = React.useState([])

React.useEffect(() => {
  // do some checking here to ensure data exist
  if (data) {
    // mutate data if you need to
    setState(data)
  }
}, [data])

[hansololai]

Yeah the useQuery should be already an “effect” hook, so you don’t have to do that inside useEffect. the useEffect was meant for async stuff, like fetch, but the useQuery is not an async function, it will immediately return result (loading:true, data:null). Then re-return the result when data is ready. so it does not have to be in useEffect.