CODEWITHSUNDEEP
javascriptapisveltesvelte-componentsveltekit
zipzit
zipzit

Reputation: 4027

Sveltekit Todos Example... Where is the data being stored?

I'm learning how SvelteKit works. There is a pretty nice "hello world PLUS" place to start with the "create-svelte" example. In that example there is a "todos" page. Source files here. It's a simple page where you can add an delete things to do tasks. And I'm trying to figure out how the individual tasks are managed.

I can see where an todos array is created in Javascript on the client; I can verify that via console.logs in index.svelte file. I can see via Chrome Inspect (dev tools, network tab) where the creation of a task generates a todos.json network Post request http://localhost:3000/todos.json The get/post request simply returns the original content back to the client.

What I'm not seeing is where the data is being stored on the browser. I was fully expecting to see something in local storage, session storage, cookies or even indexeddb.

What I'm not seeing is where that content is being stored. If I close the browser tab and reopen, the data is there. If I open a different browser on the same local computer, no task data exists. If I "empty cache and hard reload" the task data remains.

After doing some testing, I can see one cookie. Name: userid Value: d38b9b44-1a8b-414e-9a85-1c2b2c0700f4 Domain: localhost Path: / Expires/MaxAge: Session Size: 42 HttpOnly: ✓ Priority: Medium

If I modify or delete this cookie in any way then the stored task data disappears.

So where is the todos task data being temporarily stored? What am I not seeing?

Upvotes: 1

Views: 1441

Answers (1)

zipzit
zipzit

Reputation: 4027

I read the header for this file _api.js multiple times. I tested "https://api.svelte.dev" in the browser and got back null responses.. I just assumed that this was a dead server.

It turns out that the folks at svelte do offer a fully functional api server, both receiving, deleting and storing todo task data. See my test notes within api function.

A browser request to https://api.svelte.dev/todos/d38b9b44-1a8b-414e-9a85-1c2b2c0700f4 absolutely returns my task data, and now I can see how this stuff works. Info offered here in case anybody else is wondering what's going on here.

Here is the complete _api.js file

/*
This module is used by the /todos.json and /todos/[uid].json
endpoints to make calls to api.svelte.dev, which stores todos
for each user. The leading underscore indicates that this is
a private module, _not_ an endpoint — visiting /todos/_api
will net you a 404 response.

(The data on the todo app will expire periodically; no
guarantees are made. Don't use it to organise your life.)
*/

const base = 'https://api.svelte.dev';


export async function api(request, resource, data) {
    console.log("resource: ", resource);
    // returns--> resource:  todos/d38b9b44-1a8b-414e-9a85-1c2b2c0700f4
    //https://api.svelte.dev/todos/d38b9b44-1a8b-414e-9a85-1c2b2c0700f4    <--- test this !!
    // user must have a cookie set
    if (!request.locals.userid) {
        return { status: 401 };
    }

const res = await fetch(`${base}/${resource}`, {
    method: request.method,
    headers: {
        'content-type': 'application/json'
    },
    body: data && JSON.stringify(data)
});

// if the request came from a <form> submission, the browser's default
// behaviour is to show the URL corresponding to the form's "action"
// attribute. in those cases, we want to redirect them back to the
// /todos page, rather than showing the response
if (res.ok && request.method !== 'GET' && request.headers.accept !== 'application/json') {
    return {
        status: 303,
        headers: {
            location: '/todos'
        }
    };
}

return {
    status: res.status,
    body: await res.json()
};

}

Upvotes: 3

Related Questions