Usage with SVELTE 5

[saent-x]

I am having difficulty using orpc with Svelte v5; heres my implementation below;

<script lang="ts">
  import { orpc } from '$lib/orpc';
  import {} from '@orpc/tanstack-query';

  const query = orpc.planet.list.queryOptions({
    input: {
      limit: 5,
      cursor: 0
    }
  });
  
  console.log(query)
</script>

<div class="p-4">
  <h2>Welcome to the Dashboard</h2>
  {#if query.status === 'pending'}
    <p>pending</p>
  {:else if query.status === 'success'}
    {#each query.data.pages as page}
      {#each page as planet}
        <tr>
          <td>{planet.id}</td>
          <td>{planet.name}</td>
        </tr>
      {/each}
    {/each}
  {/if}
</div>

I am new to orpc/trpc, so not sure how to retrieve the result of the query. I am getting errors for query."[...]"

[dosubot[bot]]

Hi @saent-x! I'm Dosu and I’m helping the orpc team.

The issue is that orpc.planet.list.queryOptions returns a config object for TanStack Query, not a reactive query result. To actually fetch data and get properties like status and data, you need to pass that config to createQuery (from Svelte Query). The result of createQuery is a Svelte store, which you can use in your template.

Here's how you can fix your code:

<script lang="ts">
  import { orpc } from '$lib/orpc';
  import { createQuery } from '@tanstack/svelte-query'; // Make sure this is installed

  const query = createQuery(
    orpc.planet.list.queryOptions({
      input: {
        limit: 5,
        cursor: 0
      }
    })
  );
</script>

<div class="p-4">
  <h2>Welcome to the Dashboard</h2>
  {#if $query.status === 'pending'}
    <p>pending</p>
  {:else if $query.status === 'success'}
    {#each $query.data.pages as page}
      {#each page as planet}
        <tr>
          <td>{planet.id}</td>
          <td>{planet.name}</td>
        </tr>
      {/each}
    {/each}
  {/if}
</div>

Notice the use of $query in the template—this is how you access the store's value in Svelte. This pattern is consistent with how orpc is designed to work with Svelte and TanStack Query: you generate query options with orpc, then pass them to createQuery for reactivity. More details on this pattern can be found in the orpc source and tests.

If you run into any issues with dependencies, make sure you have @tanstack/svelte-query installed and up to date.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[saent-x]

@dosu isn't using svelte-query's creatQuery function the old implementation according to the docs? It is marked as old...

[dosubot[bot]]

Based on the current orpc codebase and docs, there’s no indication that using createQuery with orpc is deprecated or replaced for Svelte 5 integration. The established pattern is still to generate query options with orpc and pass them to createQuery (from @tanstack/svelte-query) to get a reactive store for your Svelte component. There are no deprecation warnings or alternative APIs for this in orpc as of now, and no recent pull requests or issues mention a new recommended approach for Svelte 5 integration (source).

If the upstream TanStack Query docs mark createQuery as “old,” that’s likely about changes in TanStack Query itself, not orpc. As of July 2025, orpc’s Svelte integration still expects you to use createQuery or an equivalent reactive query function. If TanStack Query introduces a new Svelte 5-specific API, orpc will likely update its integration and docs to match, but that hasn’t happened yet.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}