fascinating-indigo

how to refetch with a passed in variable, state is behind

I'm strugging with the best way to handle this. I have a button in my web app that generates an Excel spreadsheet in the backend and sends it to the browser as a download. When the button is clicked, it passes an id to a function so it knows which list to go create a spreadsheet of. I am saving that id into state, but that is not working because of how state works and it is always behind by a click. The function that runs on the click is this one:

const createXLSXFromPriceList = (id: string) => {
    console.log({id});
    setPriceListToSpreadsheetID(id);
    refetch();
};

const createXLSXFromPriceList = (id: string) => {
    console.log({id});
    setPriceListToSpreadsheetID(id);
    refetch();
};

And the useQuery with the refetch:

const {
    data: spreadsheetResult,
    refetch
}: {
    data: string | undefined;
} = useQuery({
    queryFn: getPriceListSpreadsheet,
    queryKey: ['spreadsheetResult', priceListToSpreadsheetID],
    enabled: false,
    gcTime: 1
});

const {
    data: spreadsheetResult,
    refetch
}: {
    data: string | undefined;
} = useQuery({
    queryFn: getPriceListSpreadsheet,
    queryKey: ['spreadsheetResult', priceListToSpreadsheetID],
    enabled: false,
    gcTime: 1
});

21 Replies

fascinating-indigoOP•16mo ago

What is the best way to handle this so that the query runs with the correct id on click?

national-gold•16mo ago

Why is it not a mutation?

fascinating-indigoOP•16mo ago

Its just getting data from the database and creating a spreadsheet with it, should that be a mutation?

national-gold•16mo ago

I think a useMutation has some advantages in this scenario

fascinating-indigoOP•16mo ago

ok, will it allow me to send the correct id when I click the button? basically how do I call the useMutation on command passing it a given variable?

national-gold•16mo ago

Did you read the documentation?

fascinating-indigoOP•16mo ago

yes, I've looked through it, it quite overwhelming

fascinating-indigoOP•16mo ago

ok, did some more digging and found this: https://github.com/TanStack/query/discussions/5820#discussioncomment-6604337

GitHub

How can i useQuery when parameter change by onClick button? · TanSt...

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...

fascinating-indigoOP•16mo ago

i'll try fetchQuery right in that function. Thanks!

ratty-blush•16mo ago

Would this not work?

const [priceListToSpreadsheetID, setPriceListToSpreadsheetID] = useState<string | null>(null);

const {
  data: spreadsheetResult,
} = useQuery({
  queryFn: () => {
    // use priceListToSpreadsheetID to fetch the proper spreadsheet
  },
  queryKey: ['spreadsheetResult', priceListToSpreadsheetID],
  enabled: !!priceListToSpreadsheetID,
});

// Logic updates priceListToSpreadsheetID

const [priceListToSpreadsheetID, setPriceListToSpreadsheetID] = useState<string | null>(null);

const {
  data: spreadsheetResult,
} = useQuery({
  queryFn: () => {
    // use priceListToSpreadsheetID to fetch the proper spreadsheet
  },
  queryKey: ['spreadsheetResult', priceListToSpreadsheetID],
  enabled: !!priceListToSpreadsheetID,
});

// Logic updates priceListToSpreadsheetID

This is a more declaritive (and intended) way to use useQuery^

fascinating-indigoOP•16mo ago

oh that makes sense! Now how would I set priceListToSpreadsheetID back to null after clicking the button?

ratty-blush•16mo ago

I dont think you want to set it to null. Think about it this way, whatever the value of priceToSpreadsheetID is, useQuery will react to the new state, and give you the new data. So if you have 3 spreadsheets, "a", "b", & "c", if you set priceToSpreadsheetID to "a", useQuery will automatically fetch the spreadsheet for "a". If you want to keep viewing "a", then don't touch priceToSpreadsheetID. But if you want to view "b", then update priceToSpreadheetID to "b" and useQuery will give you the spreadsheet for "b"

fascinating-indigoOP•16mo ago

aw The click generates an excel spreadsheet and downloads it to the browser. So in that circumstance, clicking the same link twice wouldn't do anything the second time.

ratty-blush•16mo ago

Oh so you are not just fetching existing data, but generating a new spreadsheet?

fascinating-indigoOP•16mo ago

yeah, it runs code on my node server to create the spreadsheet from data in the DB and then sends it to the browser

ratty-blush•16mo ago

I see

ratty-blush•16mo ago

I think you will want to use useMutation for that https://tanstack.com/query/latest/docs/framework/react/reference/useMutation

useMutation | TanStack Query React Docs

const { data,

ratty-blush•16mo ago

Then the data that is returned from useMutation should be the spreadsheet you just created Let me see if I can create an example

const { mutate, data } = useMutation({
  mutationFn: async (spreadsheetId: string) => {
    // Generate a new spreadsheet, and return it here
    const spreadsheet = await generateSpreadsheet(spreadsheetId)
    return spreadsheet
  },
})

// data will always be the last spreadsheet that was generated.
// If the mutation has not yet been run, data will be undefined.
console.log(data)

// Run the mutation
mutate("my-spreadsheet-id")

const { mutate, data } = useMutation({
  mutationFn: async (spreadsheetId: string) => {
    // Generate a new spreadsheet, and return it here
    const spreadsheet = await generateSpreadsheet(spreadsheetId)
    return spreadsheet
  },
})

// data will always be the last spreadsheet that was generated.
// If the mutation has not yet been run, data will be undefined.
console.log(data)

// Run the mutation
mutate("my-spreadsheet-id")

Updated it to be more concise

ratty-blush•16mo ago

This page gives a good explanation on mutations: https://tanstack.com/query/latest/docs/framework/react/guides/mutations

Mutations | TanStack Query React Docs

Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects. For this purpose, TanStack Query exports a useMutation hook. Here's an example of a mutation that adds a new todo to the server:

fascinating-indigoOP•16mo ago

cool, thank you! works beautifully! Appreciate the help!

ratty-blush•16mo ago

Awesome!

Gaming

Programming

how to refetch with a passed in variable, state is behind

Did you find this page helpful?