# preloadQuery with Tanstack Router loader

**URL:** <https://community.apollographql.com/t/preloadquery-with-tanstack-router-loader/9100>\
**Category:** Client SDKs\
**Tags:** client, web\
**Created:** [May 22, 2025, 8:58pm UTC](https://community.apollographql.com/t/preloadquery-with-tanstack-router-loader/9100 "2025-05-22T20:58:52Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![BrennenRocks](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/brennenrocks/32/6130_2.png) [@BrennenRocks](https://community.apollographql.com/u/BrennenRocks)\
**Post date:** [May 22, 2025, 8:58pm UTC](https://community.apollographql.com/t/preloadquery-with-tanstack-router-loader/9100/1 "2025-05-22T20:58:52Z")

</div>

I am attempting to use `preloadQuery` with the Tanstack router `loader` function

```ts
  loader: ({ params }) => {
    return preloadQuery(DealQuery, {
      variables: { dealId: params.dealId },
    });
  },

```

Then in the component

```ts
  const dealQueryRef = Route.useLoaderData();
  const { data } = useReadQuery(dealQueryRef);

```

Every _other_ time I click on a link it will give me

```auto
Error message
Expected a QueryRef object, but got something else instead.

```

I’m not entirely sure why it’s working sometimes and not others. My `<Outlet />` to this route is wrapped in a `<Suspense>`

---

<div class="post-metadata">

**Author:** ![jerelmiller](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jerelmiller/32/3314_2.png) [@jerelmiller](https://community.apollographql.com/u/jerelmiller)\
**Post date:** [May 22, 2025, 9:06pm UTC](https://community.apollographql.com/t/preloadquery-with-tanstack-router-loader/9100/2 "2025-05-22T21:06:40Z")

</div>

Hey @BrennenRocks 👋

We had a similar reported issue last week ([Using toPromise in a tanstack router loader loses internal queryRef · Issue #12619 · apollographql/apollo-client · GitHub](https://github.com/apollographql/apollo-client/issues/12619)). Are you using TanStack router with our [TanStack integration](https://github.com/apollographql/apollo-client-integrations/tree/main/packages/tanstack-start) or with just the plain `@apollo/client` package? If just the plain package, would you mind trying to TanStack integration and seeing if that helps here?

---

<div class="post-metadata">

**Author:** ![BrennenRocks](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/brennenrocks/32/6130_2.png) [@BrennenRocks](https://community.apollographql.com/u/BrennenRocks)\
**Post date:** [May 22, 2025, 9:11pm UTC](https://community.apollographql.com/t/preloadquery-with-tanstack-router-loader/9100/3 "2025-05-22T21:11:14Z")

</div>

This is the exact issue I’m facing. I’m not using TanStack Start, just TanStack Router with a Vite React App. I will give it a try

---

<div class="post-metadata">

**Author:** ![jerelmiller](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jerelmiller/32/3314_2.png) [@jerelmiller](https://community.apollographql.com/u/jerelmiller)\
**Post date:** [May 22, 2025, 9:16pm UTC](https://community.apollographql.com/t/preloadquery-with-tanstack-router-loader/9100/4 "2025-05-22T21:16:10Z")

</div>

I don’t _think_ there is anything too specific to TanStack Start, but happy to be wrong! That package is still in beta (we plan to release it publicly soon once we get more feedback) so please let me know if you do run into issues with that!

---

<div class="post-metadata">

**Author:** ![BrennenRocks](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/brennenrocks/32/6130_2.png) [@BrennenRocks](https://community.apollographql.com/u/BrennenRocks)\
**Post date:** [May 22, 2025, 9:58pm UTC](https://community.apollographql.com/t/preloadquery-with-tanstack-router-loader/9100/5 "2025-05-22T21:58:58Z")

</div>

Do you know if there is an example of someone using this library?

---

<div class="post-metadata">

**Author:** ![jerelmiller](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jerelmiller/32/3314_2.png) [@jerelmiller](https://community.apollographql.com/u/jerelmiller)\
**Post date:** [May 22, 2025, 10:01pm UTC](https://community.apollographql.com/t/preloadquery-with-tanstack-router-loader/9100/6 "2025-05-22T22:01:46Z")

</div>

Not to my knowledge, but @lenz might know more (he’s been the one primarily working on that library integration).

---

<div class="post-metadata">

**Author:** ![BrennenRocks](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/brennenrocks/32/6130_2.png) [@BrennenRocks](https://community.apollographql.com/u/BrennenRocks)\
**Post date:** [May 22, 2025, 10:03pm UTC](https://community.apollographql.com/t/preloadquery-with-tanstack-router-loader/9100/7 "2025-05-22T22:03:37Z")

</div>

Would a workaround to using the preloadQuery be to just call the `client` directly in the loader?  
`client.query({ query: DealQuery, variables: { dealId: params.dealId } });`

To at least populate the cache?

---

<div class="post-metadata">

**Author:** ![jerelmiller](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jerelmiller/32/3314_2.png) [@jerelmiller](https://community.apollographql.com/u/jerelmiller)\
**Post date:** [May 22, 2025, 10:10pm UTC](https://community.apollographql.com/t/preloadquery-with-tanstack-router-loader/9100/8 "2025-05-22T22:10:58Z")

</div>

That might work! I’ll be honest I haven’t worked much with TanStack Router so I don’t entirely know the ins and outs, but worth a try!

---

<div class="post-metadata">

**Author:** ![BrennenRocks](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/brennenrocks/32/6130_2.png) [@BrennenRocks](https://community.apollographql.com/u/BrennenRocks)\
**Post date:** [May 22, 2025, 10:25pm UTC](https://community.apollographql.com/t/preloadquery-with-tanstack-router-loader/9100/9 "2025-05-22T22:25:54Z")

</div>

For what it’s worth I did give [apollo-client-integrations/packages/tanstack-start at main · apollographql/apollo-client-integrations · GitHub](https://github.com/apollographql/apollo-client-integrations/tree/main/packages/tanstack-start) a try but to no avail. Here is my implementation if @lenz wanted to give it a glance.

client.ts

```ts
import { createQueryPreloader } from '@apollo/client';
import { ApolloClient, InMemoryCache } from '@apollo/client-integration-tanstack-start';

export const client = new ApolloClient({
  cache: new InMemoryCache(),
});

export const preloadQuery = createQueryPreloader(client);

```

router.ts

```ts
import { createRouter as createTanStackRouter } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';
import { routerWithApolloClient } from '@apollo/client-integration-tanstack-start';
import { createQueryPreloader } from '@apollo/client';
import { client } from './providers/le-apollo-provider/client';

export function createRouter() {
  const router = createTanStackRouter({
    routeTree,
    defaultPreload: 'intent',
    scrollRestoration: true,
    defaultStructuralSharing: true,
    // Let Apollo handle caching in loaders instead of Tanstack Router https://tanstack.com/router/v1/docs/framework/react/guide/preloading#preloading-with-external-libraries
    defaultPreloadStaleTime: 0,
    context: {
      // auth will initially be undefined
      // We'll be passing down the auth state from within a React component
      auth: undefined!,
      apolloClient: client,
      preloadQuery: createQueryPreloader(client) as any, <--- Couldn't find the correct type for this
    },
  });

  return routerWithApolloClient(router, client);
}

// Register the router instance for type safety
declare module '@tanstack/react-router' {
  interface Register {
    router: ReturnType<typeof createRouter>;
  }
}

```

app.ts

```tsx
import { RouterProvider } from '@tanstack/react-router';
import Auth0Provider from './providers/auth0-provider';
import { createRouter } from './router.ts';
import { useAuth0, User } from '@auth0/auth0-react';
import ApolloProvider from './providers/apollo-provider/apollo-provider.tsx';

function InnerApp() {
  const auth = useAuth0();
  if (auth.isLoading) {
    return null;
  }

  return (
    <RouterProvider
      router={createRouter()} <-- using the client-integration-tanstack-start router
      context={{
        // There should always be an ID (sub)
        auth: auth as ReturnType<typeof useAuth0<User & { sub: NonNullable<User['sub']> }>>,
      }}
    />
  );
}

export default function App() {
  return (
    <Auth0Provider
    ...
    >
      <ApolloProvider>
        <InnerApp />
      </ApolloProvider>
    </Auth0Provider>
  );
}

```

$dealId.ts

```ts
...

  loader: ({ params, context }) => {
    return context.preloadQuery(DealQuery, {
      variables: { dealId: params.dealId },
    });
  },

...

  const dealQueryRef = Route.useLoaderData();
  console.log({ dealQueryRef });
  const { data } = useReadQuery(dealQueryRef);

```

This `console.log` would give me alternating responses between

![image](https://us1.discourse-cdn.com/flex019/uploads/apollographql/original/2X/f/fba0856b873ff4ba99de0bff0c504fa0c8595aee.png)  
and  
 ![image](https://us1.discourse-cdn.com/flex019/uploads/apollographql/original/2X/a/aac994fdf4da2ec174c1e67067a4bf2e10a489fe.png)

The latter giving me the

```auto
Error message
Expected a QueryRef object, but got something else instead.

```

when I tried to use the `queryRef` in the `useReadQuery`

tldr; There was no difference for me in outcome when using the `@apollo/client-integrations-tanstack-start` and just using `@apollo/client`

Just to reiterate I am using Vite with React and just TanStack Router, not TanStack Start.

Do you want me to also post this on that github issue you linked?

---

<div class="post-metadata">

**Author:** ![jerelmiller](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jerelmiller/32/3314_2.png) [@jerelmiller](https://community.apollographql.com/u/jerelmiller)\
**Post date:** [May 22, 2025, 10:34pm UTC](https://community.apollographql.com/t/preloadquery-with-tanstack-router-loader/9100/10 "2025-05-22T22:34:11Z")

</div>

Thanks for sharing that context! Yes adding this to that issue would be super helpful. Appreciate it!

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [May 23, 2025, 7:58am UTC](https://community.apollographql.com/t/preloadquery-with-tanstack-router-loader/9100/11 "2025-05-23T07:58:13Z")

</div>

I just pinged Manuel Schiller from the TanStack Router maintainers, and he noted that this could be caused by `defaultStructuralSharing` - could you try setting this to `false`?

---

<div class="post-metadata">

**Author:** ![BrennenRocks](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/brennenrocks/32/6130_2.png) [@BrennenRocks](https://community.apollographql.com/u/BrennenRocks)\
**Post date:** [May 23, 2025, 1:07pm UTC](https://community.apollographql.com/t/preloadquery-with-tanstack-router-loader/9100/12 "2025-05-23T13:07:16Z")

</div>

This worked! It worked both with and without the `@apollo/client-integrations-tanstack-start` package