Question

我是NextJS和GraphQL的新手，并且正在使用带有（NextJS和GraphQL）的MERN堆栈构建应用程序。我只需要澄清一下我是使用getStaticProps(nextJS)中的查询返回的数据还是使用useQuery钩子（阿波罗/客户）返回的数据

例如：我有一个提取数据的组件取决于ID，其名称为[id] .tsx，我知道在nextJS中，我们使用getStaticProps在生成组件之前获取数据，就像在我的组件中一样

export const getStaticProps: GetStaticProps = async ({ params }) => {

  let oneUserQuery = await client.query({
    query: ONE_USER_QUERY,
    variables: { id: params.id }
  });

  let user = oneUserQuery.data.userInfo;

  return {
    props: {
      user   //we fetched the userInfo and we have access to it in [id].tsx component props
    }
  };
};

，并且在组件本身中，我们可以使用由apollo / client提供的useQuery挂钩来像这样通过相同的graphQL查询获取数据

export default function User(props) {
//here we have access to user in the props and we can render using it

  const route = useRouter();

  const { loading, error, data } = useQuery(ONE_USER_QUERY, {
    variables: { id: route.query.id }
  });

  if (error) return <div>Error loading one user.</div>;
  if (loading) return <div>Loading.....</div>;

  const { userInfo } = data;

  return (
    <Layout>
      {userInfo.id}       // also could be {props.user.id)
      <br />
      {userInfo.name}     // also could be {props.user.name)
      <br />
      {userInfo.email}    // also could be {props.user.email)
    </Layout>
  );
}

两者都工作正常，我可以从两个返回值访问userInfo和加载状态，但是哪种方法是正确的，它们之间有什么区别？

Answer 1

getStaticProps仅在设置了revalidate选项时更新查询结果。 useQuery将在阿波罗缓存更改时自动更新。因此，通常最好使用useQuery。如果您需要类似revalidate的行为，则可以在polling中设置useQuery选项。

useQuery挂钩（apolloClient）和getStaticProps（NextJS）的结果之间的差异

1 个答案: