如何在react-query中观察单独组件中的数据变化？

在React Query中，观察单独组件中的数据变化的一个常用方法是使用useQuery或useQueryClient钩子。以下是这两种方法的详细说明和例子：

使用 useQuery 钩子

useQuery 是 React Query 中用来获取数据并订阅数据变化的钩子。当数据变化时（例如，后端数据更新了），React Query 会重新获取数据，并触发组件的重新渲染。

例子：

假设我们有一个获取用户信息的 API，并希望在组件中显示这些信息，并在数据变化时更新显示。

jsx
import { useQuery } from 'react-query';

function UserProfile({ userId }) {
    const { data, isLoading, error } = useQuery(['user', userId], () =>
        fetch(`https://api.example.com/users/${userId}`).then(res =>
            res.json()
        )
    );

    if (isLoading) return <div>Loading...</div>;
    if (error) return <div>An error occurred: {error.message}</div>;

    return (
        <div>
            <h1>{data.name}</h1>
            <p>Email: {data.email}</p>
        </div>
    );
}

在这个例子中，每当 userId 改变时，useQuery 钩子会重新执行数据获取函数，从而获取新的用户数据，并且组件会根据新的数据进行重新渲染。

使用 useQueryClient 钩子

useQueryClient 钩子可以用来手动操作缓存中的查询数据，如获取、更新和观察数据。

例子：

如果您希望在组件中不仅获取数据，还要在数据更新时进行一些操作，可以使用 useQueryClient 来观察特定查询的状态。

jsx
import { useQueryClient } from 'react-query';

function MyComponent() {
    const queryClient = useQueryClient();

    useEffect(() => {
        const unsubscribe = queryClient.getQueryCache().subscribe(query => {
            if (query.queryKey === 'user') {
                console.log('User query updated!', query.state.data);
            }
        });

        return () => unsubscribe();
    }, [queryClient]);

    // 组件其他逻辑...
}

这个例子中，我们订阅了查询缓存，并在每次查询更新时检查查询键是否为 user。如果是，我们就在控制台打印出新的数据。这样可以让我们观察到与特定用户相关的数据何时发生变化，并做出响应。

总结

在React Query中，可以使用 useQuery 钩子来自动订阅和响应数据变化，或者使用 useQueryClient 钩子来更细粒度地控制和观察数据变化。这两种方法都可以有效地帮助开发者在组件中观察并响应数据的变化。