如何在 React 查询中传递参数？

Question

我需要在 React 查询中传递几个参数 one of which needs to decided by the user action

到目前为止，查询是这样的：

const { refetch: likeDislikeProfile } = useQuery(
  ['like_dislike_profile'], 
  () => like_dislike_profile_q(data.userid, <BOOLEAN_ARG>), //  
  { enabled: false }
)

每当点击 like/dislike 按钮时，参数将分别为 true/false。

这进一步用作请求中的查询参数：action?like=false

我该如何实现？

我的做法

创建一个在点击按钮时改变的本地状态
创建一个副作用 (useEffect) 方法，当此状态改变时触发该方法
这将进一步触发此反应查询

这个方法好像不好，想不出别的了atm

Answer 1

看起来您的 HTTP 请求正在后端更改数据，这就是 mutations 的用例。

来自official docs

A query is a declarative dependency on an asynchronous source of data that is tied to a unique key. A query can be used with any Promise based method (including GET and POST methods) to fetch data from a server. If your method modifies data on the server, we recommend using Mutations instead.

对于您的用例，它应该是这样的

const updateLike = useMutation((id, bool) => like_dislike_profile_q(id, bool))

// invoke the mutation at any point like this
updateLike.mutate('my-id', true)

在 Tkdodo's blog post on mutations

上阅读有关突变的更多信息

如何在 React 查询中传递参数？

How to pass an argument in a React Query?

reactjs

react-query

我的做法