React Query入门指南

最新推荐文章于 2024-07-19 16:46:00 发布
最新推荐文章于 2024-07-19 16:46:00 发布
阅读量1.4k 收藏 36
点赞数 47
文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56504343/article/details/138488519
版权

查询 queries

对于query的定义，在官方文档中是这么说的：
“A query is a declarative dependency on an asynchronous source of data that is tied to a unique key” 翻译过来是：查询是对绑定到唯一键的异步数据源的声明性依赖项

我对于query的理解是：将一个唯一的key（unique key） 与 一个获取数据的方法 进行绑定

你可以在组件中或者hook中，使用 useQuery 来订阅一个查询

useQuery 至少需要接受两个参数：

  • key：该查询的唯一键值
  • fn：一个返回Promise的函数，能解析出数据或者抛出错误（即具体的请求数据的函数）
import { useQuery } from '@tanstack/react-query'

function App() {
    // 具体获取数据的函数
    const getUserInfo = async () => {
        const data = await axios('/api/useInfo')
        return data
    }

    // 订阅一个查询
    const userInfo = useQuery({
        queryKey: ['useData'],
        queryFn: getUserInfo 
    })
}

这个唯一的key值，将在内部用于重新获取、缓存和在整个项目中共享该查询的信息

useQuery的返回结果包含了你需要用到的绝大部分信息，这也正是使用react-query的一个好处，可以提高开发效率

//  接上面例子

const { isLoading, isError, isSuccess, data, error, status } = useQuery({
    queryKey: ['useData'],
    queryFn: getUserInfo 
})

首先是结果中会返回一些比较重要的状态：

  • 布尔值isLoading 或者 status === 'loading' 表示查询暂时还没有数据
  • 布尔值isError 或者 status === 'error' 表示查询遇到了错误
  • 布尔值isSuccess 或者 status === 'success' 表示查询成功，数据可用

可以看出 status 和 isLoading、isError、isSuccess的作用是差不多的，关键在于你习惯于使用谁来进行判断

然后是一些重要的信息：

  • error 如果查询处于isError状态,可以获取到错误的具体信息
  • data 如果查询处于isSuccess状态，可以获取到请求的数据

下面是一个简单的例子，来整体演示使用useQuery

import { useQuery } from '@tanstack/react-query'

function App() {
    // 具体获取数据的函数
    const getUserInfo = async () => {
        const data = await axios('/api/useInfo')
        return data
    }

    // 订阅一个查询
    const { isLoading, isError, isSuccess, data, error, status } = useQuery({
        queryKey: ['useData'],
        queryFn: getUserInfo 
    })

    if (status === "loading") {
        return <span>Loading...</span>;
    }

    if (status === "error") {
        return <span>Error: {error.message}</span>;
    }

    return (
        <div>
          <div>userName: {data.userName}</div>
          <div>age: {data.age}</div>
        </div>
    )
}

查询键值 queryKey

在react-query内部基于queryKey来管理查询缓存

queryKey必须是一个数组，对数组内部的结构没有过多的限制，该数组可以简单的由一个或多个字符串构成，也可以是包含许多嵌套对象的数组。

  1. 最简单的形式
useQuery({ 
  queryKey: ['userData'], 
  ...
})
  1. 复杂的形式

当查询需要更多的信息来唯一的描述数据时，数组可以是 字符串 加上 任意数量的可序列化对象的形式

常见的场景有：需要传递参数来进行查询

// 根据 userId 查询数据
let userId = 'xxx'
useQuery({ 
  queryKey: ['useInfo', userId], 
  ... 
})

// 查询特定type的数据
useQuery({ 
  queryKey: ['xxxx', { type: 'xxx' }] 
})

注意：
queryKey的散列是确定的，即 顶层数组中各个key不同的排列顺序会被认为是不同的查询键值

// 以下两个的查询键值不相等，因为顶层数组中各key的排列顺序不同
useQuery({ queryKey: ['todos', status, page], ... })
useQuery({ queryKey: ['todos', page, status], ...})

// 以下两个的查询键值是相等的，顶层数组中各key的排列顺序相同，嵌套对象中的排列顺序不影响
useQuery({ queryKey: ['todos', { status, page }], ... })
useQuery({ queryKey: ['todos', { page, status }], ...})

查询函数 queryFn

官方文档对queryFn的定义：A query function can be literally any function that returns a promise. The promise that is returned should either resolve the data or throw an error.

即：queryFn可以是任何形式的函数，必须返回一个promise，并且返回的promise应该 给出数据 或者 抛出错误

  1. queryFn的参数

queryFn默认接受一个queryFunctionContext参数，该参数是一个对象，主要包含以下属性：

  • queryKey：即整个queryKey数组
  • pageParam：在 无限查询 中会使用到，包含查询当前页所使用的参数
  • signal：用作 查询取消
  • meta：可以填写任意关于该查询的额外信息

由上可知，queryKey不仅可以用于唯一的标识查询，也可以作为参数传递给queryFn

useQuery({  
  queryKey: ['useData', useId],
  queryFn: getUserData     
})

const getUserData = async ({ queryKey }) => {
  const [ _key, useId ] = queryKey
  const data = await fetch('/api/useData' + useId)
  return data
}
  1. 抛出和处理错误

为了使 React Query 确定查询错误，查询函数的错误必须抛出或返回rejected Promise。查询函数中引发的任何错误都将被持久化在查询的error状态中

并行查询

并行查询即并行的执行多个查询，或者说同时执行的查询

  1. 如果需要并行查询的数量较少且固定，可以使用手动的并行查询
function App () {
  // 下面的查询将自动地并行执行
  const usersQuery = useQuery({ queryKey: ['users'], queryFn: fetchUsers });
  const teamsQuery = useQuery({ queryKey: ['teams'], queryFn: fetchTeams });
  const projectsQuery = useQuery({ queryKey: ['projects'], queryFn: fetchProjects });
  ...
}

在 React 的 suspense 模式下使用 React Query 时，这种并行模式不起作用。 因为第一个查询将在内部抛出 Promise，并且将在其他查询运行之前挂起组件。 此时建议使用 useQueries hook

  1. 使用useQueries进行动态并行查询

如果需要执行的查询数量不固定，即在每次渲染之间都会变化，那就不能进行手动查询了

useQueries接受一组作为查询配置的对象，并以数组形式返回查询的结果：

function App({ users }) {
  const userQueries = useQueries({
    queries: users.map((user) => {
      return {
        queryKey: ["user", user.id],
        queryFn: () => fetchUserById(user.id),
      };
    }),
  });
}

有依赖的查询

有依赖的查询 或者说 按顺序排列的查询，即当前查询是否执行（或何时执行）依赖于前一个查询的结果

可以使用enable配置项来告诉query何时可以运行：

// 先执行这个query来拿到user的数据
const { data } = useQuery({
  queryKey: ["user", email],
  queryFn: getUserByEmail,
});

const userId = data?.id;

// 此query依赖于 user query 的结果
const { data } = useQuery({
  queryKey: ["projects", userId],
  queryFn: getProjectsByUser,
  // 直到 userId 存在，查询才会被执行
  enabled: !!userId,
});

QueryClient

使用QueryClient可以创建一个query客户端，来与query缓存联系起来

import { QueryClient } from '@tanstack/react-query'

const queryClient = new QueryClient({
  // 全局设置query的一些配置
  defaultOptions: {
    queries: {
      staleTime: Infinity,
    },
  },
})

QueryClient可传入一个对象，其中包含三个参数（三个参数都是可选的）：

  • defaultOptions：为使用该client的所有查询（query）和修改（mutation）设置默认的配置项
  • queryCache：该client所连接的query缓存
  • mutationCache：该client所连接的mutation缓存

配置项

  1. refetchOnWindowFocus

如果用户在短暂离开窗口后回来时，数据被标记为过时的，react-query会在后台自动请求新的数据

可以使用该配置项在全局或者单个查询中禁用该功能

// 全局
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
    },
  },
})

// 单个查询
useQuery({
  queryKey: ["useData"],
  queryFn: getUserData,
  refetchOnWindowFocus: false,
})
  1. enabled

可以为单个查询配置enabled = false来禁用自动查询

当enabled = false时：

  • 如果查询已经缓存了数据，将以status === 'success'进行初始化
  • 如果查询没有缓存数据，将以status === 'loading'进行初始化
  • 该查询不会在挂载时自动获取数据、不会在后台重新获取数据
  • 将忽略客户端的invalidateQueries和refetchQueries调用
  • 从useQuery返回的 refetch 可用于手动触发查询以进行数据获取
// 手动触发查询
const { isError, data, error, refetch } = useQuery({
  queryKey: ["useData"],
  queryFn: getUserData,
  enabled: false,
})

<button onClick={() => refetch()} >手动触发查询</button>

永久性的禁用查询并不是你使用react-query的理由，你可能更多的需要进行惰性查询

  1. retry

当useQuery查询失败时，如果该查询的请求未达到最大连续重试次数（默认 3 次），那么react-query将自动重试该查询。

可以在全局或者单个查询上配置重试逻辑

  • retry = false 将禁用重试 && retry = true 将无限次重试
  • retry = 5 设置为一个数字，表示最大重试次数
  • retry =（failureCount，error）=> ... 允许基于请求失败的原因进行自定义逻辑

QueryClient的一些api

  1. queryClient.fetchQuery

该方法是一个异步的方法，用于触发查询并将结果缓存，通常用于预加载数据。

参数

fetchQuery接受的参数和useQuery相同，即 queryKey、queryFn、option（可选）

返回值

调用fetchQuery将返回一个promise对象，包含了请求错误的信息 或者 成功时的数据

当调用fetchQuery时会执行如下步骤：

  • 检查缓存中是否已有与提供的 queryKey 对应的缓存数据
  • 如果缓存中有数据，并且数据是新鲜的，那么fetchQuery将返回这些数据。
  • 如果缓存中没有数据，或者数据已过时，那么将执行 queryFn，并将结果数据放入缓存中。

使用示例

演示用户在导航到用户详情页时，使用fetchQuery预加载用户数据

import { QueryClient } from 'react-query';

// 创建一个 QueryClient 实例
const queryClient = new QueryClient();

// 一个函数，用于获取用户数据
const fetchUserById = async (userId) => {
  const response = await fetch(`api/users/${userId}`);
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

// 假设这是一个事件处理函数，当用户点击时触发
const handleUserLinkClick = (userId) => {
  // 使用 fetchQuery 预加载用户数据
  queryClient.fetchQuery(['user', userId], () => fetchUserById(userId));

  // 在这里，我们可能会进行路由导航操作
  navigate(`/users/${userId}`);
};

// 用户详情组件
const UserDetails = ({ userId }) => {
  // 使用 useQuery 钩子查询用户数据
  const { data, isLoading, error } = useQuery(
    ['user', userId],
    () => fetchUserById(userId),
    {
      // 如果数据已经在 fetchQuery 中预加载，这里会立刻拿到缓存数据
      staleTime: Infinity, // 你可以根据需要设置合适的新鲜度
    }
  );

  if (isLoading) {
    return <span>Loading...</span>;
  }

  if (error) {
    return <span>Error: {error.message}</span>;
  }

  return (
    <div>
      <h1>{data.name}</h1>
      {/* ... 其他用户信息 */}
    </div>
  );
};
  1. queryClient.prefetchQuery

该方法是一个异步的方法，用于在后台提前获取数据并将其存储在缓存中，以便在未来某个时刻需要时能够立即使用

prefetchQuery的工作方式与fetchQuery大致相同，但prefetchQuery更关注于数据的预加载，它通常不返回数据，只是单纯地将数据预加载到缓存中。同时，prefetchQuery通常在数据需要之前调用，而不是在渲染组件时调用

  1. queryClient.getQueryData

该方法是一个同步方法，用于返回已存在的查询的缓存数据，如果没有缓存数据则返回undefined

参数

只需要传入 queryKey 即可

返回值

如果缓存存在则返回数据，否则返回undefined

使用示例

const data = queryClient.getQueryData(queryKey)

更多

其他更多的queryClient api 可以前往官网查看

主动查询失败 Query Invalidation

查询会在过时之后自动重新查询，但是在很多时候，由于修改了某些数据，你能明确的知道数据已经是过时的了（即使它还没有到默认的过时时间）。

这个时候可以调用QueryClient的invalidateQueries方法来明确的告诉react-query数据已经过时了，并重新查询新的数据

简单的例子：

import { useQuery, useQueryClient } from "@tanstack/react-query"

// 获取 queryClient
const queryClient = useQueryClient()

// 使缓存中的每个查询都无效
queryClient.invalidateQueries()

// 无效以 userData 开头的键值的查询
queryClient.invalidateQueries({ queryKey: ["userData"] })

对于传入queryKey使查询失效的精确度，也有多种方式进行控制

  1. 传入特定的（或者完整）的queryKey
queryClient.invalidateQueries({
  queryKey: ["userData", { userName: "easy code sniper" }],
})

// 该查询会被无效
const userQuery = useQuery({
  queryKey: ["userData", { userName: "easy code sniper" }],
  queryFn: getUserData,
})

// 该查询不会被无效
const userQuery = useQuery({
  queryKey: ["userData"],
  queryFn: getUserData,
})
  1. 使用exact配置，表示只想使指定的queryKey对应的查询失效
queryClient.invalidateQueries({
  queryKey: ["userData"],
  exact: true,
})

// 该查询会被无效
const userQuery = useQuery({
  queryKey: ["userData"],
  queryFn: getUserData,
})

// 该查询不会被无效
const userQuery = useQuery({
  queryKey: ["userData", { userName: "easy code sniper" }],
  queryFn: getUserData,
})
  1. 自定义更精细化的查询失效

可以将 predicate 函数传递给invalidateQueries方法。 此函数将从查询缓存中接收每个Query实例，并允许你返回 true 或 false 来确定是否使该查询无效

queryClient.invalidateQueries({
  predicate: (query) =>
    query.queryKey[0] === "userData" && query.queryKey[1]?.age >= 18,
});

// 该查询会被无效
const userQuery = useQuery({
  queryKey: ["userData", { age: 20 }],
  queryFn: getUserData,
});

// 该查询会被无效
const userQuery = useQuery({
  queryKey: ["userData", { age: 10 }],
  queryFn: getUserData,
});

修改 Mutations

对于mutations的定义，在官方文档中是这么说的：
“mutations are typically used to create/update/delete data or perform server side-effects.”

即：用于创建、删除、更新数据或者执行服务器命令等操作

你可以在组件或者自定义hook中使用 useMutation 来修改数据

简单示例：修改用户的信息

function App() {
  const mutation = useMutation({
    mutationFn: (userInfo) => {
      return axios.post("/updateUserInfo", userInfo);
    },
  });

  return (
    <div>
      {mutation.isLoading ? (
        "updating ..."
      ) : (
        <>
          {mutation.isError ? (
            <div>An error occurred: {mutation.error.message}</div>
          ) : null}

          {mutation.isSuccess ? <div>updated!</div> : null}

          <button
            onClick={() => {
              mutation.mutate({ userName: 'easy code sniper' });
            }}
          >
            修改用户信息
          </button>
        </>
      )}
    </div>
  );
}

由上面的例子可以看出，你可以通过调用mutation方法来给mutationFn传入参数

useMutation和查询一样也会返回一些状态和信息：

状态：

  • 布尔值isLoading 或者 status === 'loading' 表示修改正在进行
  • 布尔值isError 或者 status === 'error' 表示修改遇到了错误
  • 布尔值isSuccess 或者 status === 'success' 表示修改成功，数据可用

信息：

  • error 如果修改处于isError状态,可以获取到错误的具体信息
  • data 如果修改处于isSuccess状态，可以获取到数据

注意： mutate函数是一个异步函数，在React16及以前版本，你不能在事件回调中直接使用它。你需要将mutate包装在另一个函数中

// 在React16及之前的版本，这将无法正常工作
const CreateTodo = () => {
  const mutation = useMutation({
    mutationFn: (event) => {
      event.preventDefault()
      return fetch("/api", new FormData(event.target))
    },
  })

  return <form onSubmit={mutation.mutate}>...</form>
}

// 这将正常工作
const CreateTodo = () => {
  const mutation = useMutation({
    mutationFn: (formData) => {
      return fetch("/api", formData)
    },
  })
  const onSubmit = (event) => {
    event.preventDefault()
    mutation.mutate(new FormData(event.target))
  }

  return <form onSubmit={onSubmit}>...</form>
}

副作用

useMutation最便利，也是最有用的功能可能就在于它能定义一些副作用配置，这些配置允许在其生命周期的任何阶段快速而简单地产生副作用。

一个最常见的例子就是，在修改数据之后能自动的重新获取最新的数据（如果你经历过一些开发，那你一定会对这个功能感到兴奋🚀～～）

useMutation({
  mutationFn: updateUserInfo,
  onMutate: (variables) => {
    // 修改即将发生！
  },
  onError: (error, variables, context) => {
    // 错误触发！
  },
  onSuccess: (data, variables, context) => {
    // 成功时触发
  },
  onSettled: (data, error, variables, context) => {
    // 错误或成功……这并不重要
  },
})

除了在useMutation中可以配置这些副作用项外，还可以在调用mutate函数时配置组件特定的副作用，支持的配置项包括：onSuccess、onError 和 onSettled

mutate(userInfo, {
  onSuccess: (data, variables, context) => {
  },
  onError: (error, variables, context) => {
  },
  onSettled: (data, error, variables, context) => {
  },
})

注意： 如果组件在修改完成之前就被卸载了，那使用mutate配置的组件特定的副作用将不被运行

修改导致的查询失败

在开发中非常常见的是，当应用中的一个对数据的修改成功时，很有可能在你的应用中有相关的查询需要作废，并需要重新获取数据来解释修改所产生的新变化

假设我们调用const mutation = useMutation({ mutationFn: updateUserInfo })对用户信息进行了修改，那么势必导致现在渲染的数据是过时的。我们希望所有对userInfo的查询都失效，并重新获取最新的数据

我们可以使用useMutation的副作用onSuccess配置 和QueryClient的invalidateQueries函数来实现

import { useMutation, useQueryClient } from "@tanstack/react-query";

const queryClient = useQueryClient();

// 当此修改成功时，将所有带有useData查询键值的查询都无效
const mutation = useMutation({
  mutationFn: updateUserInfo,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ["userData"] })
  },
})

通过修改的数据更新查询内容

当在处理更新某些数据时，新的数据往往会在更新的响应中自动返回，我们可以利用修改函数返回的对象，并使用 Query Client 的 setQueryData 方法立即用新数据更新现有的查询，而不是去触发新的数据获取，浪费对已有数据的网络调用

const queryClient = useQueryClient();

const mutation = useMutation({
  mutationFn: updateUserInfo,
  onSuccess: (data) => {
    queryClient.setQueryData(["userData", { userName: 'cqy' }], data);
  },
});

mutation.mutate({
  userName: 'cqy',
  age: 22,
});

// 下面的查询将被更新为成功的修改响应
const { status, data, error } = useQuery({
  queryKey: ["useData", { userName: 'cqy' }],
  queryFn: fetchTodoById,
});

useInfiniteQuery

useInfiniteQuery钩子用于处理无限滚动或分页场景，它可以用来逐页加载数据，并且可以无缝地集成更多数据加载到现有数据集中。

参数

useInfiniteQuery接受以下参数：

  • queryKey
  • queryFn
  • options (可选): 一个配置对象，包含以下属性：
    • getNextPageParam: 一个函数，用于从最后一页的数据中获取下一页的 pageParam
    • getPreviousPageParam: 一个函数，用于从第一页的数据中获取上一页的 pageParam
    • 其他 React Query 提供的所有配置选项，如 staleTime, cacheTime, onSuccess, onError 等

getNextPageParam

getNextPageParam用于定义如何从获取到的数据中提取分页参数，以便加载下一页的数据。

getNextPageParam函数接收两个参数：

  • lastPage: 当前查询返回的最后一页数据。
  • allPages: 当前已经加载的所有页面组成的数组。

函数的返回值应该是一个值，这个值将作为下一个 pageParam 参数传递给 queryFn 函数以获取下一页数据。

示例：

const getNextPageParam = (lastPage, allPages) => {
  // 如果 API 有一个 'nextPage' 字段，就返回它来获取下一页
  return lastPage.nextPage;
};

const getNextPageParam = (lastPage, allPages) => {
  // 如果 API 使用游标，并且存在一个 'nextCursor' 字段，就返回它
  return lastPage.nextCursor;
};

getPreviousPageParam

getPreviousPageParam用于获取前一页数据，在实现双向无限滚动或分页时特别有用。

getPreviousPageParam函数接收两个参数：

  • firstPage: 当前查询返回的第一页数据。
  • allPages: 目前已经加载的所有页面数据的数组。
    这个函数的返回值应该是一个标识，表示用于 queryFn 函数获取前一页数据时所需的 pageParam

示例：

const getPreviousPageParam = (firstPage, allPages) => {
  // 如果 API 有一个 'prevPage' 字段，就返回它来获取前一页
  return firstPage.prevPage;
};

const getPreviousPageParam = (firstPage, allPages) => {
  // 如果 API 使用游标，并且存在一个 'prevCursor' 字段，就返回它
  return firstPage.prevCursor;
};

返回值

useInfiniteQuery返回一个对象，其中包含以下属性：

  • status: 查询的状态（‘loading’, ‘error’, ‘success’, ‘idle’）。
  • data: 包含每一页数据的数组。
  • error: 查询失败时的错误对象。
  • fetchNextPage: 函数，用于获取下一页数据。
  • fetchPreviousPage: 函数，用于获取上一页数据。
  • hasNextPage: 布尔值，表示是否还有下一页数据。
  • hasPreviousPage: 布尔值，表示是否还有上一页数据。
  • isFetchingNextPage: 布尔值，表示是否正在获取下一页数据。
  • isFetchingPreviousPage: 布尔值，表示是否正在获取上一页数据。
  • isFetching: 布尔值，表示是否正在进行查询（包括初始查询和后续的分页查询）。
  • isLoading: 布尔值，表示是否正在进行初始查询。
  • isRefetching: 布尔值，表示是否正在重新获取数据。
  • 其他 React Query 钩子通常返回的属性，如 refetch, remove 等。

data

useInfiniteQuery返回的data与常规的useQuery不同，因为它需要处理多个“页”的数据，而不是单个数据集。

data 是一个对象，它包含以下属性：

  • pages: 一个数组，其中的每一个元素代表了每一页加载的数据。这些数据按照加载的顺序排列。例如，data.pages[0] 是第一页的数据，data.pages[1] 是第二页的数据，依此类推。
  • pageParams: 这个数组与 pages 数组有相同的长度，包含了获取每一页数据时 queryFn 函数使用的参数。通常这些参数是由 getNextPageParam 或 getPreviousPageParam 函数提供的。

使用示例

下面是一个使用 useInfiniteQuery 来实现无限滚动加载文章列表的例子：

import { useInfiniteQuery } from 'react-query';

// 分页获取文章的函数
const fetchArticles = async ({ pageParam = 1 }) => {
  const res = await fetch(`/api/articles?page=${pageParam}`);
  return res.json();
};

// 组件内部
const ArticlesList = () => {
  const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    status,
  } = useInfiniteQuery('articles', fetchArticles, {
    getNextPageParam: (lastPage, pages) => {
      if (lastPage.nextPage) {
        return lastPage.nextPage;
      } else {
        return undefined;
      }
    },
  });

  if (status === 'loading') return <p>Loading...</p>;
  if (status === 'error') return <p>Error: {error.message}</p>;

  return (
    <>
      {data.pages.map((page, i) => (
        <React.Fragment key={i}>
          {page.articles.map(article => (
            <p key={article.id}>{article.title}</p>
          ))}
        </React.Fragment>
      ))}
      <div>
        <button
          onClick={() => fetchNextPage()}
          disabled={!hasNextPage || isFetchingNextPage}
        >
          {isFetchingNextPage
            ? 'Loading more...'
            : hasNextPage
            ? 'Load More'
            : 'Nothing more to load'}
        </button>
      </div>
    </>
  );
};

useMutation

useMutation 钩子是用来处理异步逻辑（如创建、更新或删除数据）的，这些逻辑会引起数据的变化。与useQuery和useInfiniteQuery不同的是，useMutation不是用来获取数据的，而是用来修改数据

参数

useMutation 接受以下参数：

  • mutationFn (必须): 一个函数，它执行异步逻辑（比如API调用）。这个函数接受你传递给mutate函数的变量。
  • options (可选): 一个配置对象，可以包含如下属性：
    • onMutate: 在 mutationFn 执行之前调用的函数，用于执行乐观更新或返回回滚函数的数据。
    • onSuccess: 当 mutationFn 成功完成时调用的函数。
    • onError: 当 mutationFn 执行失败时调用的函数。
    • onSettled: 无论 mutationFn 成功还是失败都会调用的函数。
    • 以及其他选项

返回值

useMutation 返回一个对象，其中包含以下属性和方法:

  • mutate: 一个函数，你可以用它来触发异步逻辑（mutationFn）的执行。
  • mutateAsync: 类似于mutate，但是返回一个Promise，可以用于async/await。
  • data: mutationFn成功解析的数据。
  • error: 如果mutationFn抛出错误，这里会包含错误对象。
  • isLoading: 如果mutationFn正在执行，这里会是true。
  • isSuccess: 如果mutationFn成功完成，这里会是true。
  • isError: 如果mutationFn执行失败，这里会是true。
  • status: mutation的状态（idle、loading、success、error）。

最后

在我的博客上分享了更多的学习心得，感兴趣的小伙伴可以去看看

easy code sniper
关注
  • 47
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
tanstack/react-query使用手册
weixin_50236973的博客
12-01 1455
React Query 使用手册
react-query手把手教程③-并行请求及依赖请求
Web_boom的博客
08-12 871
在日常开发中，前端请求后端接口时，通常会请求多个接口。上面的示例中，请求了用户列表，团队列表，项目列表，此时的接口请求就是并行请求，每个请求互不干扰（你同样可以在数据库查询中，看到相关的概念，Google一下）。谁先请求到数据，就显示哪一项数据。假设现在有一个需求：_分别_展示github用户的仓库和代码片段列表 此时我们需要请求两个接口👉🏻点我查看在线演示() => {)});() => {)});return (仓库列表...
React ahooks库和React Query库使用场景分析
weixin_43883615的博客
06-03 1291
ahooks和react-query都是好用的react库，但它们有一些关键的区别。ahooks 是一个 React Hooks 库，主要是对react的hook函数进行高级封装，使得项目用起来更加方便；react-query 是一个用于管理应用程序数据和状态的库，它专注于处理数据获取和缓存，还提供了一些特性，例如自动缓存、自动重试、分页等。接下来会从几个问题来具体说说场景使用问题 ~（1）使用 ahooks 还是 react-query 取决于具体需求和项目的复杂度。
react query 学习笔记
好好学习天天向上
04-10 1420
中正在挂载的组件进行重新获取操作，如果组件被卸载（比如离开了当前页面组件等），并不会执行上述操作。， 只记录工作中使用到的主要功能，在使用中会不断更新，关于返回值等具体参数可以通过打印返回值查看。在内部基于查询键值来管理查询缓存，可以理解为依赖，如果依赖变化那么会重新发送查询请求。去查找状态树中是否有可用的数据，如果有则直接返回，否则则会发起请求，并将请求结果以。，比如在获取用户数据时，为了UI不那么难看，可以先默认展示一个占位头像。的组件挂载时②当用户将浏览器重新聚焦，切换到前台时③网络从离线到上线。
react-query的介绍和使用
qq_44621394的博客
11-09 6423
react-query是一个异步状态管理的hook,内置了loading,error等状态。
React Api请求最佳实践react-query3使用教程（比swr更好用更强大）
热门推荐
幻日のヨハネ
02-27 1万+
前言 在请求中，首先 axios 作为请求底层封装库，统一拦截，处理发送请求头和接收的错误响应。 那么更高一层的封装可以选择 swr 或者 react-query，目前 react-query 已经进入了第三个大版本，功能极其强大，虽然 swr 比较轻量，但是两者也只差 5kb 的打包大小，另外 swr 只有 16k start 不到，而 react-query 不断增长已有 18k star，随着时代发展，swr 已经不足以应付各种使用场景，使用 react-query 作为 axios 的顶层封装才是趋
react-query query监听器
weixin_43294560的博客
03-21 750
1、QueryObserver 监听key对应的查询,返回查询状态等信息 const observer = new QueryObserver(queryClient, { queryKey:key, 其他配置内容和useQuery相同 }) const unsubscribe = observer.subscribe(result => { console.log(result) unsubscribe() 取消监听 }) 2、InfiniteQuer
React极速入门指南
06-14
而忠彬讲师的《React快速入门指南》则会由浅入深，从非常基础的部分开始讲解React的入门。 这是一套非常适合React这个框架入门的课程，学习这个课程一定能够各位小伙伴学有所获。 为什么学ReactVue、Angular、React...
ReactNative入门指南
08-10
ReactNative入门指南是针对使用JavaScript进行混合移动应用开发的一个详细教程。React Native是Facebook推出的开源框架，它允许开发者使用JavaScript和React的组件化思想来构建原生的iOS和Android应用程序。这个指南...
react redux入门示例
08-27
React Redux入门示例 React Redux是一个流行的前端状态管理框架，用于管理React应用程序中的状态。下面是React Redux入门示例的知识点总结： 一、环境准备 在使用React Redux之前，需要先准备好环境。这里使用...
React官网入门教程
02-22
本教程将基于React官网的入门教程，介绍React的基本概念、语法以及如何创建一个简单的React应用。 首先，React的核心概念是组件。组件是React中的基本构建块，可以看作是自包含的、可重用的UI部分。每个组件都有...
react 入门实操示例
01-17
当谈及前端框架时，很多人第一反应便是 React、Angular、Vue.js 三剑客。不过当前，三剑客虽然还在，但是它们三个却往不同的方向前进。 React 用户粘性最强，有 57% 的受访者表示“用过这个技术，以后还会再用”，...
React 从入门到实战 一一开发环境基础搭建（小白篇）
热爱技术，享受生活
07-15 723
最近两年，react 也愈来愈火热，想要在里面分一杯羹，那肯定逃不过 react 技术，不管是职场人士提升自己的硬实力还是毕业生找工作，都可以跟着本文章一步一步从入门到实战。React是Facebook开发的一款JS库，那么Facebook为什么要建造React呢，主要为了解决什么问题，通过这个又是如何解决的？从这几个问题出发我就在网上搜查了一下，有这样的解释。
前端效果ᅳ1、react实现时间上下轮播特效
ChenJin_2的博客
07-16 258
前端效果ᅳ1、react实现时间上下轮播特效
Next.js 和 React的区别
07-16 355
Next.js 和 React 渲染方式、功能特点及应用场景等方面的差异。
React一基础
jiuchabaikaishui的专栏
07-15 1004
React 是一个用于构建用户界面的javaScript库，起源于facebook的内部项目，后续在13年开源了出来。声明式——只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI基于组件——组件时React最重要的内容，组件表示页面中的部分内容，组合、复用多个组件，可以实现完整的页面功能学习一次，随处使用——使用React可以开发Web应用，使用React可以开发移动端，可以开发VR应用。
面试问题：React基本概念，和所遇到的CPU和IO问题
m0_60030316的博客
07-18 360
useDeferredValue：类似防抖，截流的功能，但是比他们效率更高，他是利用React内部Schedular(调度器)实现的，通过切换优先级，当用户输入的时候，先显示输入的值，把计算值的动作排在优先级后面每次用户修改值react都会计算渲染的值，当用户新输入会打断这个过程，重新按照最新值来跑渲染，达到优化用户体验的功能。在官方文档里面可以看见React基本设计概念，React是用 JavaScrip构建快速响应的大型Web应用程序的首选方式，但是快速响应用一定的是依赖，CPU的性能和IO的约束。
[React]利用Webcomponent封装React组件
SCUhzs
07-19 398
[React]利用Webcomponent封装React组件
【React Hooks原理 - useSyncExternalStore】
最新发布
weixin_44273311的博客
07-19 404
从基本使用、源码解析（Mount首次渲染、Update更新渲染）、举例说明来介绍了useSyncExternalStore的基本原理和使用，并举例扩展了其实关于SSR的水合阶段的介绍
react query
06-01
React Query 是一个 React 应用程序的数据管理库，它提供了一种简单、灵活且强大的方式来管理您的应用程序中的数据。React Query 的主要目标是使数据管理更加容易和可预测，同时保持 React 的声明性和可组合性。 React Query 的主要特点包括： - 自动缓存和更新数据 - 与 React Suspense 和 Error Boundaries 集成 - 支持服务器端渲染 - 可以管理任意类型的数据，包括异步函数、Promises、Observables 等 - 可以使用 React Hooks 或者 Render Props 进行数据获取和更新 总之，React Query 可以让您更轻松地管理应用程序中的数据，从而提高开发效率和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值