Question: how to implement Telegram CloudStorage with persist storage

[Xyzjesus]

hi! had an experiment of wrapping telegram cloudstorage into State Storage, but have a warning that it doesn't work with persist-middleware. here's some code:

import { create } from "zustand";
import { persist, createJSONStorage } from "zustand/middleware";
import CloudStateStorage from "@/context/CloudStateStorage";
import { useCloudStorageWrapper } from "@/hooks/useCloudStorage";

interface UserState {
  username: string;
  picture: string;
  rank: number;
  points: number;
  frensQty: number;
}

interface UserActions {
  updateUser: (newUser: Partial<UserState>) => void;
}

export const useStore = create<UserState & UserActions>()(
  persist(
    (set) => ({
      username: "",
      picture: "",
      rank: 0,
      points: 0,
      frensQty: 0,

      updateUser: (newUser) => set((state) => ({ ...state, ...newUser })),
    }),
    {
      name: "user-storage",
      storage: createJSONStorage(() => {
        const cloudstorage = useCloudStorageWrapper();
        return new CloudStateStorage(cloudstorage);
      }),
    }
  )
);

import { StateStorage } from "zustand/middleware";

interface CloudStorageWrapper {
  getItem: (name: string) => Promise<string | null>;
  setItem: (name: string, value: string) => Promise<void>;
  removeItem: (name: string) => Promise<void>;
}

class CloudStateStorage implements StateStorage {
  private cloudStorage: CloudStorageWrapper;

  constructor(cloudStorage: CloudStorageWrapper) {
    this.cloudStorage = cloudStorage;
  }

  async getItem(name: string): Promise<string | null> {
    try {
      const value = await this.cloudStorage.getItem(name);
      return value ? value : null;
    } catch (error) {
      console.error(`Error getting item ${name} from CloudStorage:`, error);
      return null;
    }
  }

  async setItem(name: string, value: string): Promise<void> {
    try {
      await this.cloudStorage.setItem(name, value);
    } catch (error) {
      console.error(`Error saving item ${name} to CloudStorage:`, error);
    }
  }

  async removeItem(name: string): Promise<void> {
    try {
      await this.cloudStorage.removeItem(name);
    } catch (error) {
      console.error(`Error removing item ${name} from CloudStorage:`, error);
    }
  }
}

export default CloudStateStorage;

import { useCloudStorage } from "@telegram-apps/sdk-react";

export function useCloudStorageWrapper() {
  const cloudstorage = useCloudStorage();

  const cloudStorageWrapper = {
    getItem: async (name: string): Promise<string | null> => {
      try {
        const value = await cloudstorage.get(name);
        return value ? value : null;
      } catch (error) {
        console.error(`Error getting item ${name} from CloudStorage:`, error);
        return null;
      }
    },
    setItem: async (name: string, value: string): Promise<void> => {
      try {
        await cloudstorage.set(name, JSON.parse(value));
      } catch (error) {
        console.error(`Error saving item ${name} to CloudStorage:`, error);
      }
    },
    removeItem: async (name: string): Promise<void> => {
      try {
        await cloudstorage.delete(name);
      } catch (error) {
        console.error(`Error removing item ${name} from CloudStorage:`, error);
      }
    },
  };

  return cloudStorageWrapper;
}

could somebody explain is it possible to do it with cloudstorage?

[dai-shi]

how about avoid using useCloudStorageWrapper hook and directly passing the custom storage to the storage option?

[Xyzjesus]

no way because storage methods don't fitted

or maybe i don't know something

[dbritto-dev]

@Xyzjesus what you mean when you said "they don't fitted"?

[Xyzjesus]

hi @dbritto-dev, talking about interface of PersistStorage. get method need to be overwritten by getItem and passed by useCloudStorage hook

[Xyzjesus]

think i got your point, i've done some changes:

import { create } from "zustand";
import { persist, createJSONStorage } from "zustand/middleware";
import { initCloudStorage } from "@telegram-apps/sdk";

const cloudStorage = initCloudStorage();

const cloudStorageWrapper = {
  getItem: async (name: string): Promise<string | null> => {
    try {
      const value = await cloudStorage.get(name);
      return value ? value : null;
    } catch (error) {
      console.error(`Error getting item ${name} from CloudStorage:`, error);
      return null;
    }
  },
  setItem: async (name: string, value: string): Promise<void> => {
    try {
      await cloudStorage.set(name, value);
    } catch (error) {
      console.error(`Error saving item ${name} to CloudStorage:`, error);
    }
  },
  removeItem: async (name: string): Promise<void> => {
    try {
      await cloudStorage.delete(name);
    } catch (error) {
      console.error(`Error removing item ${name} from CloudStorage:`, error);
    }
  },
};

interface UserState {
  username: string;
  picture: string;
  rank: number;
  points: number;
  frensQty: number;
}

interface UserActions {
  updateUser: (newUser: Partial<UserState>) => void;
}

export const useStore = create<UserState & UserActions>()(
  persist(
    (set) => ({
      username: "",
      picture: "",
      rank: 0,
      points: 0,
      frensQty: 0,

      updateUser: (newUser) => set((state) => ({ ...state, ...newUser })),
    }),
    {
      name: "user-storage",
      storage: createJSONStorage(() => cloudStorageWrapper),
    }
  )
);

and it works

[dbritto-dev]

@Xyzjesus yeah, you can use custom storage

[Xyzjesus]

@dbritto-dev thanks mate, got it!

[dbritto-dev]

@Xyzjesus btw, we're working on revamping docs