Пользовательский Svelte Store с Appwrite и кэшированием

Кто бы не любил кеш, верно? Давайте посмотрим, как мы можем кэшировать данные с помощью Svelte и Appwrite!

Мы собираемся изучить, как мы можем создать хранилище Svelte, которое кэширует наши данные и динамически обновляется.

К счастью для нас, это довольно просто.

TL;DR заключается в следующем:
 – создать хранилище с помощью набора, подписки и загрузки
 – установить данные в кеш
 – обновить кеш, подписавшись на изменения данных
- Обновляйте данные динамически, вызывая функцию загрузки в вашем компоненте.

Настраиваем все 📦

Мы начнем с создания магазина appwrite.js, чтобы упростить нашу жизнь:

import { Client } from 'appwrite';

const server = {
    endpoint: import.meta.env.VITE_APP_ENDPOINT.toString(),
    project: import.meta.env.VITE_APP_PROJECT.toString(),
    collection: import.meta.env.VITE_APP_COLLECTION_ID.toString(),
    database: import.meta.env.VITE_APP_DATABASE_ID.toString()

};

const client = new Client();

client.setEndpoint(server.endpoint).setProject(server.project);

export { client, server };

Вы можете посмотреть полный пример здесь

Это позволяет нам получать доступ к SDK Appwrite откуда угодно.
Не забудьте добавить все конечные точки в файл .env в корне вашего проекта.

Веселье начинается! 🥳

Теперь давайте инициализируем другое хранилище, где мы будем реализовывать наше кеширование:

import { client, server } from './appwrite'; // This is the store we created previously
import { Databases } from 'appwrite';
import { writable } from 'svelte/store';
import { browser } from '$app/env'; // We'll use this to check if we are in the browser

function createDocumentsListStore() {
// Magic unicorns 🦄 
}

export const documentsList = createDocumentsListStore();

Большой! Давайте немного поработаем над этой функцией. Мы хотим создать хранилище с возможностью записи, которое может извлекать наши кешированные данные и которое легко обновлять.

function createDocumentsListStore() {
    const { subscribe, set } = writable({
/* Check if we're in the browser. 
If we are check the session storage for a item named documents, and parse it. This is our response. 
If we're not in the browser or if there is no item stored the response is null */
        response: browser ? JSON.parse(sessionStorage.getItem('documents')) : null
    });

    return {
        subscribe,
        set,
        load: async ( queries ,limit, offset) => {
            try {
                const database = new Databases(client, server.database);
                const response = database.listDocuments(
                server.collection, // We imported server from the appwrite.js store
                queries,
                limit,
                offset,
                undefined,
                undefined,
                ['created_at'],
                ['DESC']
            );
                set({
                    response
                });
            } catch (error) {
               // Handle the error
            }
        }
    };
}

Итак, с помощью этой функции мы проверяем, есть ли данные в хранилище сеанса, и устанавливаем на него ответ.

Где мой кеш? 😕

У нас есть небольшая проблема: мы еще ничего не сохранили в нашем кеше!

К счастью для нас, это довольно просто:

if (browser) {
    documentsList.subscribe((n) => sessionStorage?.setItem('documents', JSON.stringify(n.response ?? '')));
}

Мы просто подписываемся на магазин и сохраняем данные в хранилище сессий каждый раз, когда они меняются.

✅ установить, ✅ подписаться, 🔧 загрузить

Теперь у нас другая проблема! Данные установлены, и наш кеш всегда актуален… но данные никогда не меняются!
Вот для чего нужна «загрузка» ;)

Например, в нашем компоненте мы можем сделать что-то вроде этого:

<script>
import { documentsList } from './store';
let queries, limit, offset

$: documentsList.load(queries, limit, offset);
</script>

{#if $documentsList?.response?.total}
    {#each $documenstList.response.document as document}
        <pre>{document}</pre>
    {/each}
{/if}

Таким образом, каждый раз, когда один из аргументов, переданных для «загрузки», изменяется, данные будут обновляться!

И теперь у нас есть магазин Appwrite с кэшированными данными!

Собираем все вместе 🙌

import { client, server } from './appwrite'; 
import { Databases } from 'appwrite';
import { writable } from 'svelte/store';
import { browser } from '$app/env'; 


function createDocumentsListStore() {
    const { subscribe, set } = writable({
        response: browser ? JSON.parse(sessionStorage.getItem('documents')) : null
    });

    return {
        subscribe,
        set,
        load: async ( queries ,limit, offset) => {
            try {
                const database = new Databases(client, server.database);
                const response = database.listDocuments(
                server.collection, 
                queries,
                limit,
                offset,
                undefined,
                undefined,
                ['created_at'],
                ['DESC']
            );
                set({
                    response
                });
            } catch (error) {
               // Handle the error
            }
        }
    };
}

export const documentsList = createDocumentsListStore();
if (browser) {
    documentsList.subscribe((n) => sessionStorage?.setItem('documents', JSON.stringify(n.response ?? '')));
}

🏁 Заключение

И это все, что нужно для реализации пользовательского компактного магазина с Appwrite и кэшированием. Вы также можете просмотреть следующие ресурсы, если хотите продолжить изучение Appwrite:

Документация Appwrite
Appwrite Discord
Appwrite GitHub