useQuery and state management

[joshtheflame]

I have the following component in which when the component executes it fetches the "Tasks" via API and set the global state of context api inside "useEffect" hook and renders on screen. I have read somewhere that useQuery provides state mangement as well so the way I am setting state here after useQuery is there a way to set state within useQuery so I dont need to set it for context api or my understanding is wrong. Please guide is this the right approach or should I opt different approach.

import { useContext, useEffect, useState } from "react";
import Task from "./Task";
import { useQuery } from "react-query";
import { getTasks } from "../api/Tasks_Api";
import { DataContext, DataProvider } from "../context/DataContext";

const Tasks = ({ task }) => {
  const { mystate, setState } = useContext(DataContext);

  const {
    status,
    isError,
    error,
    isFetching,
    data: mydata = [],
  } = useQuery("TasksData", getTasks);

  useEffect(() => {
    if (status === "success") {
      setState(...mystate, mydata);
    }
  }, [status, mydata]);

  return (
    <>
      {mystate.length < 1
        ? "No tasks available"
        : mystate.map((item, index) => <Task key={item.id} task={item} />)}
    </>
  );
};

export default Tasks;

[AgarkovRoman]

It seems that in your case you don't need to use context at all. Hope this will help: https://tanstack.com/query/v4/docs/react/guides/does-this-replace-client-state

[joshtheflame]

Thanks Agarkov. Sorry for my late reply as I was out of town and just returned back. I am using Context API throughout my little application so how can I use react query global state and eliminate Context Provider? any link or video link you can point? thanks