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.

[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

[gynekolog]

@Evavic44 I'm not sure about the recommended approach but can give you an example of using with typescript.
It's not the only way, you can validate data and not just trust the type definition. It depends on your stack and your needs.

import { queryOptions, useQueryClient } from "@tanstack/react-query";

const getExportSheetsOptions = queryOptions({
  queryKey: ["export-missions"],
  queryFn: fetcher<{ sheet: { name: string } }, { id: string }>(FieldTaskDocument, { id: "your-sheet-id" }),
});

async function handleExport() {
    try {
      const data = await queryClient.fetchQuery({
        ...getExportSheetsOptions,
      });

      // typed data
      console.log(data.sheet.name);
    } catch (error) {
      console.log("Failed to export", error);
      toast({
        title: "Export Failed",
        description: "Failed to export file",
        variant: "destructive",
      });
    }
  }

[Evavic44]

Yes. I ended up passing the type directly in the fetchQuery which works as expected. I now have this:

interface ExportResponse {
  success: boolean;
  message: string;
  sheet?: { name: string };
}

async function handleExport() {
  try {
    const data = await queryClient.fetchQuery<ExportResponse>({
      queryKey: ["export-missions"],
      queryFn: () => exportSheets(),
    });

    if (data.sheet && data.success) {
      toast({
        title: data.message,
        description: "File exported successfully",
      });
    } else {
      toast({
        title: data.message,
        description: "Failed to export file",
        variant: "destructive",
      });
    }
  } catch (error) {
    console.log("Failed to export", error);
  }
}

Thanks @gynekolog