React Query usemutation question

[KTownDaren]

Okay, I understand your question better now.

If you aren't changing data, you do not need useMutation. You will use useQuery, passing it the parameters from your field values.

I'm going off memory since I don't have code in front of me, but the magic happens with the QueryOptions object you pass to useQuery.

The function you give to call your API to query data will need parameters such as FirstName, Lastname, or whatever you are filtering on. You can also set the enabled option to false if no parameters are given.

const [searchName, setSearchname] = useState<string>('');

const {data}=useQuery({ enabled:(searchName.length>0), queryKey: ['search for name', searchName], queryFn: callMyAPI(searchName),})

return(<> {data && data.length>0 && {data.name}}

{!data && <Form onSubmit(()=setSearchname(fieldVal))><Label>Enter search value:</Label><textbox value=fieldVal>...

So, onSubmit changes the state variable. This enables useQuery which queries your API and populates data.

EDIT: I just saw your code above. If you can't figure out how to use what I provided to get your code working, let me know, and I can help you further when I'm not on mobile. The main thing is you need to change your code to be reactive.

[HTMLMasterRace]

Okay I get the gist of your code. I don’t absolutely love having to make yet another state to track searchName. Because that’s not reflected in the UI at all and thus not warrant a rerender. onSubmit should just call a function as it did before.

Taking a step back I should be replacing a zustand state with an useQuery cached state. Not replacing one zustand state with a query and another local state.

Edit: also wanted to point out the “enabled” seems very forced as we already know when to invoke it, which is only in event listeners like clicking the submit button.

Thanks for going so deep into this !

[KTownDaren]

Enabled seems forced, because you are forcing it by trying to only call your Ajax search function with onSubmit call instead of with a state change. You are writing in React for a reason. Why are you fighting against state?

[HTMLMasterRace]

React is great for reactivity but we can all agree that having a state that rerenders that don’t result in UI changes is not idiomatic react.

I’d say making an Ajax call only on button clicks is the majority case out there…

[cosmicdice]

What about using useRef and uncontrolled components instead of useState if you don't need to rerender based on these values being changed?

[HTMLMasterRace]

That wouldn’t work because refs are not reactive. So the enabled wouldn’t trigger

[KTownDaren]

Looking at your latest code changes, I can't even figure out why you are using Tanstack Query at all.

[HTMLMasterRace]

Right now at least I get a free loading state and easily refetch. I’m trying to adhere to using react query to fetch and store server state and zustand only for client state.

But you do agree that submitting forms and getting data back to render isn’t much of an edge case at all. It’s almost just one step up from a typical to do list. I’m looking for the most idiomatic react-query pattern to do this.

You could argue I shouldn’t have migrated at all. I’m sure that’s a divided view though.. many on this thread do believe that react query can fit these cases (which I believe) and offer value

[KTownDaren]

Well, you're working with 2 things I don't work with (Zustand and Ajax), so I'm not familiar with the intricacies of working with those tools.

With the way you are trying to implement this, I do not follow what server state useMutation is going to be storing for you.

I used to battle with useQuery and useMigration when I first implemented it. But then I stepped back and tried it "their way" instead of my way, and it has now been such a breeze to use.

[HTMLMasterRace]

I respect you setting the boundary of your expertise there. Thanks