Tanstack Router + Relay

[ValenCassa]

Hi all! I'm using Tanstack router + Relay for my app but now that loaders are gone, is it possible to still pass in the initialQueryRef that you get from loadQuery to the component?

[tannerlinsley]

There is no storage or linkage between the load function and the component now. Just the suspense. You’ll need to store any data or refs outside the component for now. I could possibly wire up a context…

[tannerlinsley]

Gimme a day or two

[MarkArchitect]

Hi, due to the fact that Loaders have been removed, I also have a problem with the current version of the router and relay.
Below the code I used. Is there any solution to this problem?

Definition of route with loaders:

export const FilmDetailRoute = new Route({
    getParentRoute: () => rootRoute,
    path: 'filmdetails/$filmId',
    loader:async({params:{filmId}})=>{
            const filmDetailQueryRef= await loadQuery<filmDetailQueryType>(
            RelayEnvironment,
            filmDetailQuery,
            {
              id: filmId,
            },
            { fetchPolicy: 'store-or-network' },
          )
          return filmDetailQueryRef;
    },
  }).update({
    component: lazyRouteComponent(() => import('../components/film-detail'), 'FilmDetail'),
  })

definition of component which consumes preloaded data from router loader

export const FilmDetail: (typeof FilmDetailRoute)["options"]["component"] = ({
  useLoader,
  useParams,
}) => {
  const params = useParams();

  const preData = useLoader();

  const { film } = usePreloadedQuery<filmDetailQuery>(
    graphql`
      query filmDetailQuery($id: ID!) {
        film(id: $id) {
          id
          title
          director
          releaseDate
          created
          ...characterListFragment @arguments(showMore: true)
          ...characterList2Fragment @arguments(showMore: false)
          ...characterListFragmentTest
          ...characterList3Fragment
        }
      }
    `,
    preData
  );

film has all the data

I will be grateful for any help

[tannerlinsley]

I’m working on a solution.

[ValenCassa]

@tannerlinsley Hey Tanner! Are there any updates on this?

[tannerlinsley]

Yes, loaders are back!

[sairion]

it would be nice if I can build Tanstack Router version of https://github.com/loop-payments/react-router-relay (long story short, you can use EntryPoint pattern with it)