How can i useQuery when parameter change by onClick button?

[coo-kiee]

when i have list page, one of lists has id.

when i click that one, i want to get info about that id;

I use useMutation and my code like this:

// Mutation
const { mutateAsync: getData } = useGetData();

// onClick Function of Button
const openDataModal = async (id: number) => {
    const res = await getData(id);
    
    // etc
    ...
};

But, It just Read Data Not Create/Update/Delete

So, I think that i have to use useQuery,

If I needed to use useQuery, I would do it like this:

const [ id, setId ] = useState(0);
const { refetch: getData } = useGetData(id);

// onClick Function of Button
const openDataModal = async (id: number) => {
    setId(id)
    const res = await getData();
    
    // etc
    ...
};

Q1. Is it correct to use useQuery while adding State like this?

Q2. Can't I use Mutation instead of adding unnecessary State?

[TkDodo]

if you use a mutation, there is no caching.
I wouldn't do disabled + refetch. If you want ad-hoc fetching, use queryClient.fetchQuery. But it really depends on what openDataModal does. Usually, it just renders another react component, in which case I would have that component just run that data fetching with a normal useQuery. Something like:

const dialog = useDialog()

const openDataModal = (id: number) => {
    dialog.open(<MyDialog id={id} />)
};

...

function MyDialog({ id }) {
  const { data } = useQuery(...)
}

then, you can show a loading indicator in the dialog while it fetches data for the first time, and you get full caching support.

[vincerubinetti]

Btw, I assume the reason he said to not use refetch is because that seems to ignore cache and always make a network request, whereas queryClient.fetchQuery makes use of cache. However the latter doesn't provide isLoading or isError or any of the other conveniences of useQuery.

Still don't know how to accomplish both goals without writing a silly custom hook combining useQuery and queryClient.fetchQuery.

[Jamalahmad123]

  const [isClicked, setIsClicked] = useState<boolean>(false);

  const { data, isSuccess } = useFetchRequestExpertisesSummary(
    projectId,
    isClicked
  );

  useEffect(() => {
    if (isClicked && isSuccess) {
      exportMultipleWorksheetsToExcel(data);
    }
  }, [isSuccess, isClicked]);

  return (
    <div className="flex items-center justify-between gap-4">
      <h2 className="h2-semibold">Expertise</h2>
      <Button
        variant="outline"
        className="gap-2"
        onClick={() => {
          setIsClicked(true);

          if (data) {
            exportMultipleWorksheetsToExcel(data);
          }
        }}
      >
        Generate Report <FileChartColumnIncreasing size={16} />
      </Button>
    </div>
  );
};```

@TkDodo I want to generate excel from the data. so i set enable to false by default. Then I did like this. so what do you think about this

[Jamalahmad123]

@TkDodo What do you think

[gynekolog]

@Jamalahmad123 Don't know if I'm missing any point, but you can make a simple function, fetch data and do whatever you want with them. You don't need useEffect or useState.

const handleClick = async () => {
    try {
      const data = await queryClient.fetchQuery({ queryKey, queryFn })
      // Do whatever you want with the data. For example exportMultipleWorksheetsToExcel(data);
    } catch (error) {
      console.log(error)
    }
  };

[Evavic44]

Question. How can we handle error and success toast with this method? Here's my current set-up:

async function handleExport() {
  try {
    const data = await queryClient.fetchQuery({
      queryKey: ["export-missions"],
      queryFn: async () => exportSheets(),
    })
    
    // data is returning any

  } catch (error) {
    console.log("Failed to export", error)
    toast({
      title: "Export Failed",
      description: "Failed to export file",
      variant: "destructive",
    })
  }
}

P.S: I've thought about setting an error and success state but I want to know the recommended approach.

@gynekolog @TkDodo