在React + Apollo GraphQL中查询先验查询结果可以通过使用Apollo Client的useQuery
钩子函数来实现。useQuery
函数接受一个GraphQL查询作为参数,并返回一个包含查询结果的对象。
首先,确保你已经安装了@apollo/client
包。然后,在你的React组件中导入useQuery
函数:
import { useQuery } from '@apollo/client';
接下来,定义你的GraphQL查询。假设你要查询一个名为getUser
的查询,它返回用户的姓名和年龄:
import { gql } from '@apollo/client';
const GET_USER = gql`
query GetUser {
user {
name
age
}
}
`;
然后,在你的组件中使用useQuery
函数来执行查询:
function MyComponent() {
const { loading, error, data } = useQuery(GET_USER);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return (
<div>
<p>Name: {data.user.name}</p>
<p>Age: {data.user.age}</p>
</div>
);
}
在上面的代码中,useQuery
函数返回一个包含loading
、error
和data
属性的对象。loading
表示查询是否正在进行中,error
表示查询是否发生了错误,data
包含了查询结果。
在组件中,我们根据loading
和error
的状态显示不同的内容。如果查询正在进行中,我们显示"Loading...";如果查询发生了错误,我们显示"Error :(";如果查询成功,我们显示用户的姓名和年龄。
这就是在React + Apollo GraphQL中查询先验查询结果的基本方法。你可以根据自己的需求进行进一步的定制和扩展。如果你想了解更多关于Apollo Client的信息,可以访问腾讯云的Apollo产品介绍页面:Apollo产品介绍。
领取专属 10元无门槛券
手把手带您无忧上云