Can't call trpc Procedure

[tom-huntington]

So I tried to follow this example:
https://github.com/icflorescu/trpc-sveltekit#call-the-trpc-procedures-in-your-pages

// +page.svelte
<script lang="ts">
    import { trpc } from '$lib/trpc';
  
    let greeting = 'press the button to load data';
    let loading = false;
  
    const loadData = async () => {
      loading = true;
      greeting = await trpc.greeting.query({name: "Tom"});
      loading = false;
    };
  </script>
  
  <h6>Loading data in<br /><code>+page.svelte</code></h6>
  
  <a
    href="#load"
    role="button"
    class="secondary"
    aria-busy={loading}
    on:click|preventDefault={loadData}>Load</a
  >
  <p>{greeting}</p>

But the type returned by await trpc.greeting.query({name: "Tom"}); is not a string. Autocompletion is not really helping me out.

[tom-huntington]

Edit: The docs provide details how to do ssr with hydration properly https://github.com/ottomated/trpc-svelte-query#ssr-with-sveltekit

---

I got hello world working for ssr-trpc, based on https://kit.svelte.dev/docs/load

// +page.server.ts
import { trpc } from '$lib/trpc';

/** @type {import('./$types').PageServerLoad} */
export const load = async (event) => {
  const greeting = await trpc.greeting.ssr({name: "Tom"}, event);

	return {
		greeting,
	};
};

// +page.svelte
<script lang="ts">
    import { trpc } from '$lib/trpc';
    export let data
</script>
  
<h1>Greeting: {data.greeting}</h1>

Now I need to get the database working...

---

Database working

// +page.svelte
<script lang="ts">
    export let data;
</script>

<ul>
  {#each data.all as post}
    <li>id: {post.id},  name: {post.name}</li>
  {/each}
</ul>

// +page.server.ts
import { db } from '$lib/db';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async (event) => {
  const all = await db.selectFrom('Example').selectAll().execute();
  return {
    all
  }
};

Although you probably want to do this through trpc-svelte-query to get hydration.

[tom-huntington]

I realized the trpc object is being created by https://github.com/ottomated/trpc-svelte-query.

Copy pasting from the docs I managed to get this working

// +page.svelte
<script lang="ts">
    import { trpc } from '$lib/trpc';
    const query = trpc.greeting.query({ name: 'tRPC' });
</script>
  
{#if $query.isSuccess}
  <p>{$query.data}</p>
{:else if $query.isError}
  <p>{$query.error.message}</p>
{:else}
  <p>Loading...</p>
{/if}

The types weren't working because the result of trpc.greeting.query({ name: 'tRPC' }); is some kind of svelte auto subscribe object, and you need to prefix $ before use (i.e. $query.data to get the sting back).