difference between result from useQuery hook (apolloClient) and getStaticProps (NextJS)

Question

I'm new to NextJS and GraphQL, and i'm building an app using MERN stack with (NextJS and GraphQL). And i just need a clarification about whether i use the data returned from the query in getStaticProps(nextJS) or the data returned from useQuery hook (apollo/Client)

for example: i have a component which fetches a data depends on ID its name is [id].tsx, and i know that in nextJS we use getStaticProps to fetch data before the component is generated, like so in my component

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
    }
  };
};

and in the component itself we can use useQuery hook provided by apollo/client to fetch data with the same graphQL query like so

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>
  );
}

both works fine and i can access the userInfo and loading state from both returned value, but which approach is the right one and what is the difference between them?

@MarkSteggles Not really, i just used both in different components cause i don't know the difference, if you figured it out i wish you add your answer here, and sorry for late reply — hamohuh

UjinT34 UjinT34 · Accepted Answer · 2020-08-02T09:27:10

getStaticProps updates query results only when revalidate option is set. useQuery will automatically update when apollo cache changes. So it is generally better to use useQuery. If you need revalidate like behaviour than you can set polling option in useQuery.

difference between result from useQuery hook (apolloClient) and getStaticProps (NextJS)

1 Answers