withRelay fallback not working

[ddanielcruzz]

I'm passing a fallback component to the withRelay function but I still get the fallback in _app.tsx when the page suspends

Here's my function:

export function withCustomRelay<Props extends WiredProps, ServerSideProps>(
  Component: ComponentType<Props>,
  query: GraphQLTaggedNode,
  options?: Partial<WiredOptions<Props, ServerSideProps>>
) {
  return withRelay(Component, query, {
    fallback: <section>Custom fallback</section>,
    createClientEnvironment: () => getClientEnvironment(),
    createServerEnvironment: async (ctx) => {
      const { createServerEnvironment } = await import(
        './createServerEnvironment'
      );
      return createServerEnvironment({ request: ctx.req });
    },
    ...(options || {}),
  });
}

Idk If I'm missing some config or what could it be

Thanks!

[ddanielcruzz]

Some update:

I found that if I wrap the return of a page in <Suspense /> it uses that instead of the default one in _app.tsx and still ignores the fallback option

// _app.tsx
const CustomApp = () => {

  return (
    <Suspense fallback={<p>Default fallback</p>}>
      ...
    </Suspense>
  )
}

// pages/page.tsx
const Query = graphql``

const Page = () => {
 return ( 
    <Suspense fallback={<p>Page fallback</p>}>
      ...
    </Suspense>
  )
}

export default withRelay(Page, Query, {
  fallback: <p>Fallback Option</p>
})

This will suspend with 'Page fallback'

[rrdelaney]

I'm not able to reproduce this, but I am curious how you're using Suspense in _app.ts like that? Normally that should throw an error when rendering on the server, so maybe that's related to why this isn't working.

[ddanielcruzz]

I added the Suspense there (_app.tsx), because if omitted then I just get a blank screen and nothing loads 🤷‍♂️

[rrdelaney]

What version of React are you using? React 17 isn't able to render <Suspense> on the server at all, so I'm surprised everything isn't just crashing.