标签: react-query

我第一次尝试反应查询，然后我在启动反应应用程序时得到了这个。

虽然我添加了 QueryClientProvider 我仍然面临着树顶：Error: No QueryClient set, use QueryClientProvider to set one

索引.js

ReactDOM.render(
    <QueryClientProvider queryClient={queryClient}>
        <App />
    </QueryClientProvider>
  ,
  document.getElementById('root')

应用程序.js

function App() {
  return (
      <div className="App">
       <Forms/>
      </div>
  );
}

表单.js

function Forms() {
    const[createTodo,todoMutation]= useMutation((event) => {
        axios.post('/todos', event.target.elements.todo.value);
    })

    return (

        <div>
            <form onSubmit={createTodo}>
                <label htmlFor="todo">todo-item:</label>
                <input id="todo" name="Add todo"/>
                <button>Submit</button>
            </form>
        </div>

    )
}

包.json

    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-query": "3.12.1",
    "react-scripts": "4.0.0"

React Query 有没有办法在发生错误时返回以前的数据？现在，当出现错误时，所有帖子都会消失，并且我有空白页面，因为数据未定义，但我想保留旧数据。我想在发生错误时保留旧数据。我有 keepPreviousData: true 但这并不能解决问题。

import React from 'react';
import AxiosClient from 'api/axiosClient';
import { createFetchResourcesAction } from 'api/actions/resources/resourcesActions';
import { Post, Resources } from 'api/actions/resources/resources.types';
import { Home } from './Home';

export const HomeContainer = () => {
  const { selectedPage, perPage, handlePageChange } = usePagination();

  const fetchResources = ({ pageParam = 1 }) =>
    AxiosClient.request<Resources<Post>>(createFetchResourcesAction(perPage, pageParam));

  const { data, isError, isFetching } = useQuery(
    ['resources', selectedPage, perPage],
    () => fetchResources({ pageParam: selectedPage }),
    { keepPreviousData: true }, …

我已经有点迷失了react-query。本质上，我有一个useQuery从数据库中获取用户。他们的详细信息将添加到表单中，他们可以更新和提交。

我遇到的问题是更新是对不同的数据库完成的。稍后将批量更新主数据库。因此，我不需要重新获取初始数据，而是需要使用它setQueryData来更新缓存版本。

queryClient = useQueryClient()

const { mutate } = useMutation(postUser, {
    onSuccess: async (response) => {
        console.log(response)

        queryClient.cancelQueries('user');
        const previousUser = queryClient.getQueryData('user');
        console.log(previousUser)
        queryClient.setQueryData('user', {
            ...previousUser,
            data: [
              previousUser.data,
              { '@status': 'true' },
            ],
          })
        return () => queryClient.setQueryData('user', previousUser)
    }
})

目前我有类似上面的东西。因此它调用 postUser 并获得响应。响应看起来像这样

data:
    data:
        user_uid: "12345"
        status: "true"
        message: "User added."
        status: 1
    

然后我getQueryData为了获取数据的缓存版本，目前看起来像这样

data:
    @userUuid: "12345"
    @status: ""
message: "User found."
status: 1

所以我需要将缓存版本@status更新为true。根据我上面的内容，似乎在缓存中添加了一个新行

data: Array(2)
    0: …

我正在编写一种项目管理应用程序，该应用程序将包含大量“任务”，其中包含许多属性，这些属性将在整个应用程序中呈现。我正在考虑使用 React Query 来预取、本地缓存并从服务器更新此数据。

我想要正确解决的一个关键架构问题是，当我查询或改变时Tasks[123]，我会影响状态中的单个底层对象，而不是到处都被重复的数据所困扰。乍一看，如果查询键设置正确，React Query 似乎非常适合这项工作。然而，在他们的例子中，他们似乎没有这样做（或者我无法理解）。

在他们的基本示例中，他们Posts使用 来获取一些启动和查询queryClient.getQueryData(["post", post.id])。据我所知，如果我查看示例中提供的 ReactQueryDevtools 窗口，这会导致数据重复。

我认为应该重写该示例以使用类似的东西是否正确queryClient.getQueryData(["posts", {id: post.id} ])？

我正在尝试在 Drupal 后端上将 React-query 与 Ionic React Web 应用程序一起使用。我有一个 React 表单（使用react-hook-form），让用户可以选择将图像附加到他们的用户帐户。

Ionic 通过 JSON:API 与 Drupal 交互，而 Drupal 的 JSON:API 要求先上传文件，然后将文件附加到用户帐户，因此我需要两个突变。

我的问题是：如何实现这两个突变以便上传文件，然后，如果成功，我使用第二个突变更新用户帐户，如果上传不成功，我会显示错误？

目前我的代码如下所示：

添加照片.tsx

  const onSubmit = async (userData: JsonFormUser) => {
    if (userData.photoType === 'other') {
      const myJsonData : JsonDataUserPhotoOther = {
        data: {
          id: userObject.id,
          type: 'user',
          attributes: {
            photoType: userData.photoType,
            photoName: userData.photoName,
          },
        },
      };

      // Upload the new photo.
      if (imageSrc && !imageSrc.includes(baseUrl)) {
        const myCroppedImgBlob = await getCroppedImg(
          imageSrc,
          croppedAreaPixels,
        );
        mutatePhotoFile.mutate(myCroppedImgBlob);
        // Todo: Find …

我的反应应用程序中有上下文，我想在上下文中调用查询并将状态值设置为 api 数据中的对象。我尝试了以下操作，但收到错误，无法读取未定义的属性（4）。所以我知道这可能是因为数据尚未返回，因此我无法将状态设置为数组中的对象，那么如何解决这个问题？另外，我将如何处理上下文传递到的组件中的状态，即加载等。

另一个问题是我应该在上下文中调用 API，还是应该在组件中调用，然后在组件中设置上下文状态？这是更好的方法吗？

到目前为止的代码：

export const DataProvider: React.FunctionComponent = ({ children }) => {
 const getApi = async (): Promise<any> => {
    const response = await axios.get(`https://www.xxxxxx`).then(res => res.data);
    return response;
  }

  const { data: result, status, error, isFetching }: any = useQuery(['apiData'], () => getApi());

  const [myValue, setmyValue] = React.useState(result[4]); // this is causing the issue

  return (
    <DataContext.Provider value={{myValue, setmyValue, result}}>
      {children}
    </DataContext.Provider>
  );
};

我正在将我的CRA应用程序转换为拦截器模式Nextjs并遇到一些问题Axios。

它有效，但我被迫创建一个Axios实例并将其传递给每个 api 调用。

有一个更好的方法吗？

这是我现在所拥有的：

Profile.js:

import { useSession } from 'next-auth/react'

function Profile(props) {
    const { data: session } = useSession()
    const [user, setUser] = useState()
    useEffect(()=> {
      const proc= async ()=> {
        const user = await getUser(session?.user?.userId)
        setUser(user)
      }
      proc()
    },[])
    
    return <div> Hello {user.userName}<div>
}

getUser.js:

export default async function getUser(userId) {
    const axiosInstance = useAxios()
    const url = apiBase + `/user/${userId}`
    const { data } …

我正在努力创建一个yarn workspace在 React 和 React Native 之间共享代码的方法（一旦完全完成，即将发布博客文章！）。

对我们来说最重要的部分是在两个平台之间共享业务逻辑。在这种情况下我们使用react-query网络请求。

我们为此创建了一个“渲染道具”组件

import { useAllDevices } from "../../queries/devices";\n\nexport interface DeviceListProps {\n    devices: any[];\n    isLoading: boolean,\n    onItemClick?: () => void;\n}\n\nexport interface DeviceItemListProps {\n    name: string;\n    onItemClick?: () => void;\n}\n\nexport const DeviceListContainer = ({ render }: { render: any }) => {\n    const { data, isLoading } = useAllDevices();\n    return (\n        <>\n            {render({ devices: data?.devices, isLoading })}\n        </>\n    )\n}\n

在哪里useAllDevices有这样的东西：

export const useAllDevices = …

所以我的例子：

const Component = () => {
  const [param, setParam] = useState('defaul')
  const { isLoading, isError, data } = useQuery('data', () => fetch(`https://test.com?param=${param}`)

  ....
}

例如，我将在某个地方更改参数状态，并且我想使用此更新的参数获取日期。我想在每次参数状态发生变化时重新发送 API 调用。我怎样才能实现这个目标？

PS 我使用React Query lib

我正在使用 React Query 制作访客呼叫系统。

我有一种调用（按钮），我只想在按下按钮时调用 api。然而，当组件被渲染时，它会不断调用 api。

1. 如何在渲染时不调用组件
2. 如何仅在按下按钮时调用api

我应该怎么办？

//App.jsx
const query = useQuery('resData', getEmployData('datas'), {
  enabled: false
  });

const callBtn = () => {
  query.refetch()
}


return (
  <ul>
    <li onClick ={callBtn}>Post</li>
    <li>Food</li>
    <li>Other</li>
  </ul>
)

这是api函数

const getEmployData = async(callKind) => {
    const {data} = await axios.get(`${baseUrl}/welcome?callKind=${callKind}`);

    return data
}