[Feature]: @suspensive/relay

[2-NOW]

Package Scope

etc

Description

I see that suspensive recently added a new feature to seamlessly use jotai's async (suspend) behavior. In a similar vein, I'd like to suggest adding a wrapping component for relay that actively uses suspensive.

Possible Solution

AS-IS

https://relay.dev/docs/api-reference/use-fragment/

function UserComponent(props: Props) {
  const data = useFragment(
    graphql`
      fragment UserComponent_user on User {
        name
        profile_picture(scale: 2) {
          uri
        }
      }
    `,
    props.user,
  );

  return (
    <>
      <h1>{data.name}</h1>
      <div>
        <img src={data.profile_picture?.uri} />
      </div>
    </>
  );
}

TO-BE

function App() {
  return (
    <Suspense fallback={/* fallback component */}>
      <RelayFragment {...fragmentOptions}>
        {(data) => (
          <>
            <h1>{data.name}</h1>
            <div>
              <img src={data.profile_picture?.uri} />
            </div>
          </>
        )}
      </RelayFragment>
    </Suspense>
  );
}

etc.

No response

[manudeli]

@2-NOW I assigned you to do this. Open draft pull request to make it

[manudeli]

I close this as not planned yet. Reopen you can do it please