Fetch data in a child component

[andrewfairlie]

What is the best approach for a child component to fetch data from an API and then use that data when rendering the component? In this instance I would ideally not have to write the query for the component in each page component and instead simply import the component as-and-when I need it.

On a page I can use getStaticProps and pass the data as a prop to the component but I understand that this is only possible with page components.

I apologise in advanced if this is a silly question, and appreciate any help.

[rafaelalmeidatk]

This will be easier when the server support for Suspense is ready, but until then you can use react-ssr-prepass to do a prepass in the React element tree to find requests and resolve them. This is what libraries like urql do: https://github.com/FormidableLabs/urql/blob/master/packages/next-urql/src/with-urql-client.tsx#L112

Keep in mind this stuff is experimental and doing a second pass on the element tree will be slower than directly doing requests