标签: react-query

我已经换行<ReactQueryDevtools />了<QueryClientProvider>，所以我不明白为什么我会遇到这个问题？

我查看了 TanStack 查询文档，但我不明白这个问题。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { worker } from '@uidotdev/react-query-api';
import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

const queryClient = new QueryClient();

new Promise((res) => setTimeout(res, 100))
  .then(() =>
    worker.start({
      quiet: true,
      onUnhandledRequest: 'bypass',
    })
  )
  .then(() => {
    ReactDOM.render(
      <React.StrictMode>
        <QueryClientProvider client={queryClient}>
          <BrowserRouter>
            <div className="container">
              <App />
            </div> …

如果 staleTime 比 cacheTime 长，例如 staleTime 为 10 分钟，cacheTime 为 5 分钟，会发生什么情况？我认为即使cacheTime在6分钟后无效，staleTime仍然有效，因此它不会调用服务器来获取数据。

然而，我发现一篇文章说，如果cacheTime无效，那么仍然新鲜的数据将被删除。如果 staleTime 比 cacheTime 长，那么 staleTime 是否不会按我的预期工作？

我在使用自定义反应挂钩方面遇到了一些困难。

我有 2 个定制挂钩。

第一个钩子用于获取 ID，第二个钩子用于使用先前获取的 ID 来获取配置文件。它依赖于该 ID，所以我需要等待这个承诺。

我有以下自定义挂钩：

export const UseMetamask = () => {

    //Todo: Create check if metamask is in browser, otherwise throw error
    const fetchWallet = async (): Promise<string | null> => {
        try {
            const accounts: string[] = await window.ethereum.request(
                {
                    method: 'eth_requestAccounts'
                },
            );

            return accounts[0];

        } catch(e) {
            console.error(e);

            return null;
        }
    }
    
    return fetchWallet();
}

然后在我的第二个钩子中我有：

const wallet = UseMetamask();

然后在反应查询调用中使用它，例如：

useQuery(
    ['user', wallet],
    () => getUserByWallet(wallet),

现在它抱怨钱包说它是一个Promise<string | null> …

将反应查询更新到最新版本后，使用 useMutation 时，“isLoading”状态未定义。这是代码：

const useAddUserNote = (owner: string) => {
  const queryClient = useQueryClient();
  const { mutate, error, data, isLoading } = useMutation({
    mutationFn: (note: CreateNoteData) => addUserNote(note),
    onSuccess: () => {
      queryClient.invalidateQueries(["allUserNotes", owner]);
    },
  });

  if (error instanceof Error) error;

  return { mutate, data, error, isLoading };
};

这是类型错误

Property 'isLoading' does not exist on type 'UseMutationResult<any, Error, CreateNoteData, unknown>'.

当我控制台记录“isLoading”时，它是未定义的

如何使用 React Typescript 在 axios 中设置我的 baseURL？

我尝试做axios.defaults.baseURL = 'myurl.com';

但是，它不起作用。在网络选项卡中，它表示承诺正在等待处理。

知道我怎样才能实现它吗？

import { useQuery } from 'react-query'
import axios from 'axios'

axios.defaults.baseURL = 'myurl.com';


const useCampaign = (token: string, campaignID: string) =>
  useQuery(
    'campaign',
    () =>
      axios
        .get(`/api/campaigns?lgp-webview-token=${token}`, {
          headers: { 'X-Campaign-ID': campaignID }
        })
        .then((res) => res.data),
    {
      retry: false,
      refetchOnWindowFocus: false
    }
  )

export default useCampaign

我有一个选择选项菜单。因此，当用户选择一个选项时，我想使用该选项向服务器发送 GET/ 请求，并从服务器接收过滤后的数据。

这可以使用 useEffect(() => {// send the request}, [criteria]) 来实现

因为，useEffect 确保只有在 setCriteria 完成后请求才会发送到服务器。

但是，我正在使用react-query图书馆。所以说，它是不允许使用useQuery的内部useEffect。

结果，请求在 setState 完成之前发送到服务器。这样，服务器将获得先前选择的值，而不是当前选择的值。

更改：

<select
  name="filter"
  value={criteria}
  onChange={async (e) => {
    setCriteria(e.target.value);
  }}
>
  <option>Most recent First</option>
  <option>Price: Low to High</option>
  <option>Price: High to Low</option>
</select>;

获取帖子：

 const FetchPosts = async () => {
    const {
      data: { posts },
    } = await axios.get(`${process.env.API_URL}/api/posts`, {
      params: {
        filter: criteria,
      },
    });

    return posts;
  };

 useQuery("posts", FetchPosts);

 const …

我正在尝试进行反应查询突变（使用 axios，但如果我切换到 fetch API，我会得到相同的行为）。

我是这样设置的。

const mutation = useMutation(
    () => {
      axios.post("http://swapi.dev/api/foobar", {});
    },
    {
      onSuccess: () => {
        console.log("success");
      },
      onError: () => {
        console.log("error");
      },
    }
  );

URL 可以是任何失败的内容。我已经在我正在使用的真实 API 上进行了尝试，返回了 500 和 404 错误。

我按如下方式触发突变。

mutation.mutate();

每次我在控制台中显示“成功”。处理程序onError从不开火。在 Chrome 的网络选项卡中查看时，这些调用会返回预期的错误（并显示控制台错误）。

我正在使用react-query 3.3.6和axios 0.21.1（都是最新的发行版本）。

有人能指出我正确的方向吗？

我有像这样的组件树：

<App>
   <Loader show={...}/>
   <Form>
      <input name="val" />
      <input type="submit" />
   </Form>
   <Data input={...}>
      Data is {here is data fetched for props.input}
   </Data>
</App>

我在组件useQuery中使用钩子来获取输入数据并且它可以工作，但是我可以访问组件内的属性，并且我希望有一个全局微调器，它将在任何数据请求期间显示。可以使用 来做到这一点吗？react-queryDataisLoadingDatareact-query

我考虑过换行App并Suspense设置Loader为后备并suspense在useQuery通话中启用，但也许还有其他方法可以做到这一点？

我正在测试一个由react-query. 当承诺被拒绝时，我需要测试它的回滚行为。不幸的是，react-query日志使用 拒绝了对控制台的承诺console.error，这弄脏了我的测试输出。如何防止将react-query拒绝的承诺记录为控制台错误？

这是我的代码：

import { useState } from 'react'
import { QueryClientProvider, QueryClient } from 'react-query'
import { ReactQueryDevtools } from 'react-query-devtools'

import Navbar from './components/Navbar'
import Planets from './components/Planets'
import People from './components/People'

const queryClient = new QueryClient

function App() {

  const [page, setPage] = useState('planets')

  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <h1>Star Wars Info</h1>
        <Navbar setPage={setPage} />

        <div className="content">
          {page === 'planets' ? <Planets /> : <People />}
        </div>
      </div>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}
export default App

...失败并出现此错误： …