Relay: Refactor renderQuery to Suspense + hooks

[mattkrick]

Relay v11 lets us leverage the new react suspense patterns. Instead of the ugly renderQuery helper function that we used, we can write something that is typesafe, doesn't have funky loading states, and is just easier to reason about.

We can turn this:

  return (
    <QueryRenderer<TeamRootQuery>
      environment={atmosphere}
      query={query}
      variables={{teamId}}
      fetchPolicy={'store-or-network' as any}
      render={({props: renderProps}) => {
        const viewer = renderProps ? renderProps.viewer : null
        // @ts-ignore
        return <TeamContainer location={location} match={match} viewer={viewer} teamId={teamId} />
      }}
    />
  )

Into this:

  const queryRef = useQueryLoaderNow<TeamContainerQuery>(teamContainerQuery, {teamId})
  return (
    <Suspense fallback={''}>
      {queryRef && (
        <TeamContainer location={location} match={match} queryRef={queryRef} teamId={teamId} />
      )}
    </Suspense>
  )

For an example in code, see https://github.com/ParabolInc/parabol/commit/016f2761305132ec471941bab013aa0d899d0089

AC

• [x] renderQuery and QueryRenderer are removed in favor of relay hooks

Estimate: 8 hours

[github-actions[bot]]

Stale issue

[jordanh]

Given to @JimmyLv as an intro issue

[JimmyLv]

related PR: #5294 another example commit: https://github.com/ParabolInc/parabol/commit/864956a9b34ce1504b40de8354199bc29e4e207e