How can I add collection types to my code?

[benquan]

I am using sveltekit to try out pocketbase. This should be a newbie question, but how do you add a collection type to my code?

<script lang="ts">
  import PocketBase, { ClientResponseError } from "pocketbase";

  let todos: any = [];
  const client = new PocketBase("http://127.0.0.1:8090");

  async function loadTodos() {
      const result = await client.records.getList("todo", 1, 20);
      todos = result.items;
  }
</script>

For example I have a todo collection with just a text field.
when I specify
let todos: any = [];
How can I replace any with a Todo type

[ollema]

I'm pretty sure you should define this type yourself, in for example src/lib/types.ts:

export type Todo = {
    id: string;
    text: string;
    created: string;
    updated: string;
};

Also, I don't think you should query pocketbase from the page component, instead you should probably use a page endpoint.

You would end up with the page endpoint index.ts:

import type { RequestHandler } from '@sveltejs/kit';
import type { Todo } from '$lib/types';

import PocketBase from 'pocketbase';
const client = new PocketBase('http://127.0.0.1:8090');

export const GET: RequestHandler = async () => {
    const result = await client.records.getList('todo', 1, 20);
    const todos: Todo[] = result.items.map((record) => {
      return {
        id: record.id,
        text: record.text,
        created: record.created,
        updated: record.updated
      }
    });

    return {
        body: {
            todos: todos
        }
    };
};

and finally the page component itself index.svelte:

<script lang='ts'>
    import type { Todo } from '$lib/types';
  
    export let todos: Todo[];
</script>

{#each todos as todo}
    {todo.text}
{/each}

[ollema]

the included snippets might include a type or two, but hopefully you get my point :)

if this answered your question @benquan - please mark this discussion as answered to reduce the amount of open discussions

[benquan]

Thanks @ollema

I was doing everything from the frontend, one side question, when accessing PocketBase from an endpoint, what is the proper way to pass authentication data?

[ganigeorgiev]

It depends whether you use SSR or the static adapter. It's OK to do client-side related request on the frontend (eg. if you are working on a SPA).

For SSR it's a little more complicated since there are several approaches. Some users prefer to use a cookie AuthStore - eg. see issue pocketbase/js-sdk#15 (comment).

But the general idea is that you can create your own AuthStore and adapt it to your use case, eg:

import PocketBase, { BaseAuthStore } from 'pocketbase';

class CustomAuthStore extends BaseAuthStore {
    ...
}

const client = new PocketBase('http://127.0.0.1:8090', 'en-US', CustomAuthStore());

I'll consider in future version of the JavaScript SDK to add official SSR authstore support but since it depends on the node server that is used (express, fastify, koa, etc.), for now this is a low priority.