express - useQuery hook (apolloClient) 和 getStaticProps (NextJS) 的结果之间的区别

Question

我是 NextJS 和 GraphQL 的新手，我正在使用 MERN 堆栈和(NextJS 和 GraphQL)构建一个应用程序。
我只需要澄清一下我是否使用从 getStaticProps(nextJS) 中的查询返回的数据或从 useQuery 返回的数据钩子(Hook)(阿波罗/客户端)
例如:我有一个根据 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 hook 来获取具有相同 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当 apollo 缓存改变时会自动更新。所以一般用useQuery比较好.如果您需要 revalidate喜欢的行为超出了您的设置polling useQuery 中的选项.