Can useQuery be used for simple POSTs?

[banagale]

I tried using useMutate for this post and failed, so then reverted to trying it with useQuery and failed.

Is it correct that you may not use useQuery to make a post?

Here's a sandbox where I attempt this that seems to perform the fetch (see console) but results in the error,

config.queryFn.apply is not a function. (In 'config.queryFn.apply(config, params)', 'config.queryFn.apply' is undefined)

If useQuery may not POST, I can do another version where I fail to make this work with useMutate. Any feedback appreciated.

[callumbooth]

Hi @banagale.

It looks like you're calling the fetchSessionToken not passing a callback to be invoked later. If you change the useQuery to

const { status, data, isFetching, error } = useQuery(
    exPostPath,
    () => fetchSessionToken(exPostBody)
  );

and the h2 to: <h2>{data.title}</h2> it seems to work for me. Here is a working fork too

[banagale]

@callumbooth Thank you for the reply and pointer.

First, the answer to my question about if useQuery() may be used for a simple POST sounds like a resounding yes.

And that my problem was failing to handle callback behavior around useQuery.

I was seeking to follow the pattern in this example, where the extra arrow function was not used. Here's the fetching hook this useQuery uses.

Can you give me feedback on how my fetch hook differs such that this additional callback is necessary?

[callumbooth]

Yeah happy to. The example you were following was still passing a callback not calling the getPostById function, under the hook react query is then calling the function and passing in the arguments. However since you needed to pass in extra data that useQuery doesn't know about or have access to, you needed to close over the scope by using the extra arrow function when passing the callback.

This

export default function usePost(postId) {
  return useQuery(["post", postId], getPostById);
}

is equivalent to

export default function usePost(postId) {
  return useQuery(["post", postId], async (_, postId) => {...do some fetching});
}

[banagale]

I see. Thanks a lot, Callum. Anyone else following this thread, @tannerlinsley weighed in on use of useQuery for posts here.

[banagale]

To follow up on this, I see now that my question was one of scope. I later found this post on JavaScript Scope, Hoisting, and Arrow Functions helpful in offering greater context to @callumbooth 's explanation.