[SSG] Hydrate problem when the different variables

[nghiepdev]

Hi guys,

I have a problem when using SSG in Next.js app.

export const getStaticProps = async ({params}) => {
    const {from, to} = params;
    const [client, ssrCache] = createClient();

    await client
      .query( MY_QUEY, {
          from,
          to
        },
      ).toPromise();

    return {
      props: {
        from,
        to,
        urqlState: ssrCache.extractData(),
      }
    };
}

const [{data}] = useQuery(MY_QUERY, {
   variables: {
      from,
      to,
      additional_var: 1 // <-- add more here
   }
});

For the first time, the data is undefined.
If remove additional_var in useQuery the data hydrate to client correctly.

[kitten]

The hook always exposes previous data while it's loading new data. The code example you've shown here also doesn't really reflect the state of the hook. A result contains more properties apart from data that needs to be kept track off.

Also, if you're in need of keeping track of changing data, it may also be worth to have your own useState hook with either a useEffect or an inline if statement that stores the state as it changes.

[nghiepdev]

@kitten
I have updated the question. The problem with SSG in the Next.js app.
Hydrate problem when the different variables.

[JoviDeCroock]

Yes, so basically if the variables are different we won't expose the previous variables as there is no previous result for said query. The cache-key provided to your frontend will be the one for from, to without your additional_var, you could inject the operationResult into your props if it's really not possible to handle to omit this variable for first-hydrated-render.

[nghiepdev]

@JoviDeCroock Thank you for clear explanation.