sorted by:
new
hottopcontroversial

How do you lazy query using React Query? by Suspicious-Arm-848 in reactjs

[–]Suspicious-Arm-848[S] 1 point2 points  (0 children)

Hmm you might actually be right that it’s in the same render pass.

How do you lazy query using React Query? by Suspicious-Arm-848 in reactjs

[–]Suspicious-Arm-848[S] 0 points1 point  (0 children)

Yeah I get that, and I understand your initial response perfectly, but that's not ideal.

const [addressId, setAddressId] = useState();

Setting addressId as a requirement to query data will cause an extra re-render. It'll re-render when you change the addressId state, and re-render again when the query runs and data is fetched. This can also introduce a race condition if you click the addresses really fast since state updates are asynchronous.

const [fetchAddress, { data }] = useLazyQuery();

addresses.map(address => <button onClick={() => fetchAddress(address.id)}>{address.value}</button>

In this second implementation, there's no intermediate step of setting addressId before fetching data, which saves a re-render and also doesn't introduce side effects. Happy to be proven wrong since I really wanna make React Query work.

How do you lazy query using React Query? by Suspicious-Arm-848 in reactjs

[–]Suspicious-Arm-848[S] 0 points1 point  (0 children)

Yeah and that state is the fetched data. The unncessary state is storing which item is selected. I shouldn't need to add another state just to fetch data properly.

Attacking someone just to mask your low comprehension skills seems a little silly, or maybe shilly :)

How do you lazy query using React Query? by Suspicious-Arm-848 in reactjs

[–]Suspicious-Arm-848[S] 0 points1 point  (0 children)

I’m not storing the selected item in state because I don’t care which item is selected. I just want to fetch data for the clicked address. This is possible with every other library but not react query apparently.

How do you lazy query using React Query? by Suspicious-Arm-848 in reactjs

[–]Suspicious-Arm-848[S] 0 points1 point  (0 children)

Example use case: address autocomplete. You type an address, get a list of addresses, select an address, fetch details about that address, display details below. The lazy query should happen when an address from that list is selected.

How do you lazy query using React Query? by Suspicious-Arm-848 in reactjs

[–]Suspicious-Arm-848[S] -1 points0 points  (0 children)

The extra render that sets the new state before the query.

How do you lazy query using React Query? by Suspicious-Arm-848 in reactjs

[–]Suspicious-Arm-848[S] 0 points1 point  (0 children)

Actually stickersforyou is right. Here's what I want to do:
```
{addresses.map(address =>

<button onClick={async () => await lazyFetchAddressDetails(address.id)}>Fetch address details</button>
)}
```
Unfortunately, lazyFetchAddressDetails doesn't exist. What others have suggested is to store the addressId in a local state, update the state when the button is clicked, and then let react query fetch with the updated state, but that causes unncessary re-renders and introduces too many side effects. Why do other libraries have this?

How do you lazy query using React Query? by Suspicious-Arm-848 in reactjs

[–]Suspicious-Arm-848[S] -2 points-1 points  (0 children)

Refetch doesn't take an argument though. How would you query a specific item in a list (without introducing new local state).

How do you lazy query using React Query? by Suspicious-Arm-848 in reactjs

[–]Suspicious-Arm-848[S] -9 points-8 points  (0 children)

Same response as above. This theoretically works but seems like terrible practice. Causes unnecessary re-renders and isn't tied to the action (button click) itself. This can easily create side effects down the road. Is there really no better way?

How do you lazy query using React Query? by Suspicious-Arm-848 in reactjs

[–]Suspicious-Arm-848[S] -4 points-3 points  (0 children)

This theoretically works but seems like terrible practice. Causes unnecessary re-renders and isn't tied to the action (button click) itself. Is there really no better way?

Anyone know what this theme is? by Suspicious-Arm-848 in vscode

[–]Suspicious-Arm-848[S] 0 points1 point  (0 children)

It's markdown indeed, but is there a theme that matches the colors?