preloaded query is null when wrapping a nested component using withRelay

[reverecre]

preloaded query is null when wrapping a nested component using withRelay

[FINDarkside]

// Page component
export default function () {
  return <WrappedComponentWithRelay />;
}

That's not going to work because withRelay needs to be used to wrap the Page component.

If you want to pass stuff to deeper components you should make graphql fragments and then load the data with useFragment.

[8byr0]

@FINDarkside Yes it's a mistake in my code which I did not make when testing out with the example project :

// Add this default export instead
export default function (props: any) {
  console.log('props', props);
  return <MyNestedComponent {...props} />;
}

I think I actually figured out the problem, withRelay can only be used around page components because it involves getServerSideProps which can only be used on root page components. This is why even forwarding all the props don't work as expected. (see https://stackoverflow.com/a/64138369/9568373). Am I right?

[FINDarkside]

You're right that it needs to be used with page components only. Small technical difference is that it doesn't use getServerSideProps though, but getInitialProps :) But it also works only with page components as you said.

[8byr0]

Yes, my bad. And I actually feel ashamed cause it was written in the docs
https://reverecre.github.io/relay-nextjs/docs/page-api#arguments :

component: A Next.js page component to recieve the preloaded query from relay-nextjs.

#RTFM

TL;DR;

For anyone coming here with the same problem:

withRelay HOC can only be used with NextJS page components