Chained queries for component

[joriswijlens]

We have a use case where it is not really clear (legacy) whether a url is for a category page or a product page, so first we want to call the url mapping endpoint and then render the list or detail page based on the resource type and id.

We wanted to solve this by getting the url mapping in getProps. Assuming that the getProps would execute before the component.

This seems not to be the case, withReactQuery runs in parallel with withLegacyGetProps. This causes the useProduct hook to execute on the client only and SEO would be hurt.

Solving it in the component also does not work because react-ssr-prepass only does one pass. Understandable, because I can imagine extra passes would not be very performant!?

What I do not understand is, why getProps does not offer me a way to do something before react-query to solve this challenge.

Am I missing something?

We are using PWA kit: 3.14.0

[kevinxh]

Hi @joriswijlens ,

One option here is to create a custom useQuery call

useQuery({
  queryFn: async () => {
    const data = await firstCall()
    return await secondCall(data)
  }
})

[joriswijlens]

Hi @kevinxh tnx for the answer, but I went with another approach. I created a withReactQuerySequential that waits for the withLegacyGetProps to finish before the rendering of components start.

Using it like this in the app config:

const componentToExport = isServerSide

    ? withReactQuerySequential(withLegacyGetProps(AppConfig), options)

    : withReactQuery(AppConfig, options);


export default componentToExport;

Downsides of my approach:

• I have to manage the slas token myself (cache, middleware etc.)
• The component that routes to ProductDetail and ProductList based on the url mapping is not purely isomorphic.

Maybe I will switch to your suggestion later, it is more in the spirit of PWA kit