标签: react-query

考虑一个自定义useSignUp钩子，该mutate()钩子函数需要一些字段（name在email本例中）：

export default function App() {
  const name = "David";
  const email = "david@gmail.com";
  const signupMutation = useSignUp();

  return (
    <button
      onClick={() => {
        signupMutation.mutate(
          { name, email },
          {
            onSuccess: (result) => {
              ...
            },
            onError: (result) => {
              // Wanted: result of type ErrorResult<"name" | "email">
            }
          }
        );
      }}
    >
      Sign Up
    </button>
  );
}

在这种情况下，我希望onError的结果是这种类型ErrorResponse<"name" | "email">。但是，我明白了ErrorResponse<string>。

这是为什么？我如何指示 TypeScript 根据传递的数据推断特定的类型（即"name" | …

查询，\n我现在正在制作一个公告板。\n因此，我将信息title, content中的值 \xe2\x80\x8b\xe2\x80\x8bof 放入函数Form中。在该值中，console.log没有反应。react-queryonSuccess

export const useAddFAQPost = () => {\n    return useMutation(FaqPost)\n}\n\nexport function FaqPost(data: FAQ) {\n    return axios.post<FAQ>('/add', data, {\n     \n    })\n}\n

  const { mutate } = useAddFAQPost()\n\n    const onSubmit = useCallback((event: React.ChangeEvent<FormEvent>) => { \n        event.preventDefault();\n        return mutate({ title, type } as FAQ), {\n            onSuccess: async (data: string, context: string) => {\n                console.log(data);\n                console.log('why not?');\n            },\n            onError: async (data: string, context: string) => {\n                console.log(data);\n            } \n        };\n    }, [title, …

我目前正在我的项目中尝试react-query。

我在处理突变中的错误时遇到了麻烦。

在我的网络选项卡中，我可以确认服务器正在响应代码 400 或 500，我认为这会使 axios 抛出错误，从而触发定义的 onError 函数。

但是，无论 API 调用如何进行，onSuccess 函数始终会被调用。

我在这里缺少什么？提前致谢。

const { mutate } = useMutation(
['mutation'],
() => axios.patch(API_URL, params),
{
  onSuccess: () => {
    //this is always fired, even when response code is 400, 500, etc.
    void queryClient.invalidateQueries('query');
  },
  onError: () => {
    //should do something but never fired
  },
}

）；

我正在使用以下 fetch post 请求在我的数据库中创建一个项目。我正在尝试使用react-query来检测请求引发的错误。

export function createItem(id, body, token) {
  fetch(`${API_URL}/${id}/items`, {
    method: 'post',
    headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
    body: JSON.stringify(body)
  })
    .then(res => {
      if (res.ok) {
        return res.json()
      }

      console.log(res.status)

      throw new Error("Error creating review")
    })
    .catch((err) => console.log(err))
}

我的突变集如下：

const mutation = useMutation(() => {
    return createItem(props.item.id, item, token)
})

它的调用方式是：

<Button disabled={!valid} onPress={() => mutation.mutate()}>
    Submit
</Button>

我使用这个逻辑来显示错误：

{
   mutation.isError && <Text>{mutation.error.message}</Text>
}

我看到createItem函数错误带有 400 状态代码，这正是我所期望的，但反应查询未设置isError为 true。相反isSuccess …

想象一下当您有项目列表和项目视图时的典型用例。

所以有一个端点来获取所有项目。但您也可以使用 获取单个项目/items/:id。

但是，如果已从端点获取单个项目，则可以避免获取该项目/items。那么你会如何处理呢react-query？

function Items() {
  cosnt itemsQuery = useQuery('items', fetchItems);
  // render items
}
      
function SingleItem({ id }) {
  // you can have another query here and refetch item from server
  // but how to reuse an item from query cache and fetch only if there is no such item?
}

我正在使用react-query的useMutation()来发布数据，我能够成功发布数据。\n但是，我在成功发布数据后返回的响应我想使用该响应并将其显示在组件中

为此，我正在使用状态，并且我在 useMutation() 挂钩的 onSuccess 函数内设置状态，但它给了我错误\n错误：\nTypeError: 无法读取未定义\nat Object.onSuccess (UpdateMIDPPage. jsx:80)\nat 突变.js:86

下面是我的代码供参考

const UpdateMIDPPage = ({ open, handleClose }) => {\n  const classes = useStyles()\n  const [tidpFiles, setTidpFiles] = useState([])\n  const [reportFile, setReportFile] = useState('')\n  const [tidpWarnings, setTidpWarnings] = useState([])\n  const [reportWarnings, setReportWarnings] = useState([])\n  const [toggleVisibleIcon, setToggleVisibleIcon] = useState(true)\n\n  const { mutate, data, isSuccess, isLoading, isIdle, isError } = useMutation(\n    async (body) => {\n      const resp = await axios.post('http://localhost:4000/api/v1/midp/update', body)\n      return resp.data\n    },\n    {\n      onSuccess: …

我有一个发出 POST 请求并接收的 mutate 函数id，之后我需要立即调用下一个变异函数来根据此进行购买id，我该如何做？

const mutation = useCreatePaymentMethodMutation();

const handleSubmit = async(values:any) {
  const form = await mutation.mutateAsync({
    values,
    hash
  })
  return form
}

useCreatePaymentMethodMutation从@Hooks导入

const useCreatePaymentMethodMutation = () => {
 return useMutation(
    ({ values, accessHash }: { values: any; accessHash: string }) =>
      createPaymentMethodRequest(values, accessHash),
    {
      onSuccess: (data) => {
        // usePayMutation(data.data, accessHash); error. I need to use data after 1st mutation in next 
        request
        console.log("on success data ", data);
      },
    }
  ); …

在随机场景中，React Native 上的 React-Query 陷入加载状态，其中 isLoading 始终为 true 并且数据未定义。

我使用 Flipper-react-query-native 插件检查了缓存，发现数据保存在缓存中但没有返回。

谁能帮我？

截屏 ：

由于反应查询在很大程度上基于声明性方法，我在所有示例中看到的错误处理看起来像这样：

function Todos() {
   const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList)
 
   if (isLoading) {
     return <span>Loading...</span>
   }
 
   if (isError) {//If there is an error, render different JSX
     return <span>Error: {error.message}</span>
   } 
   
   return (
     <ul>
       {data.map(todo => (
         <li key={todo.id}>{todo.title}</li>
       ))}
     </ul>
   )
 }

但是，如果我只想在出现错误时显示警报怎么办？或者，也许我正在使用一些错误处理接口，它具有命令式触发器？像这样的东西：

if (isError) alert(`An error has occurred: ${error.message}`)

在这种情况下，我收到 两个警报。某些原因导致组件重新渲染，这当然会导致“重复”错误处理。

为什么这对我很重要？因为我的错误处理逻辑可能不是基于在组件中渲染某些特定的 JSX，而是基于某些手动一次性触发器。该警报只是一个基本示例。

任何建议将不胜感激！

我试图在一次成功后重新获取一些查询，但它不起作用！

我用了两种方法来处理它：使用refetchQueries()/invalidateQueries()

1-onSuccess回调

export const useMutateAcceptedOrder = () => {
  const queryClient = useQueryClient();
  return useMutation(
    ['AcceptedOrder'],
    (bodyQuery: AcceptedOrderProps) => acceptOrder(bodyQuery),
    {
      onSuccess: () => {
        console.log('success, refetch now!');
        queryClient.invalidateQueries(['getNewOrders']); // not work
        queryClient.refetchQueries(['getNewOrders']); // not work
      },
      onError: () => {
        console.error('err');
        queryClient.invalidateQueries(['getNewOrders']); // not work
      },
    },
  );
};

第二种方式

 const {mutateAsync: onAcceptOrder, isLoading} = useMutateAcceptedOrder();
 const acceptOrder = async (orderId: string) => {
    const body = {
      device: 'iPhone',
      version: '1.0.0',
      location_lat: '10.10',
      location_lng: …