Supabase Cache Helpers 使用教程

Supabase Cache Helpers 使用教程

supabase-cache-helpersA collection of framework specific Cache utilities for working with Supabase.项目地址:https://gitcode.com/gh_mirrors/su/supabase-cache-helpers

1. 项目介绍

Supabase Cache Helpers 是一个开源项目，旨在为 Supabase 提供框架特定的缓存工具。它通过与流行的前端缓存管理解决方案（如 SWR 或 React Query）集成，简化了与 Supabase 客户端库的交互。该项目支持 postgrest-js、storage-js 和 realtime-js 的所有功能，并自动将查询解析为唯一的查询键，从而在每次突变时自动填充查询缓存。

2. 项目快速启动

安装依赖

首先，确保你已经安装了 Node.js 和 npm。然后，通过以下命令安装 Supabase Cache Helpers：

npm install @supabase-cache-helpers/postgrest-swr

初始化 Supabase 客户端

在你的项目中初始化 Supabase 客户端：

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-supabase-url.supabase.co';
const supabaseKey = 'your-supabase-key';
const supabase = createClient(supabaseUrl, supabaseKey);

使用 SWR 进行数据获取

使用 SWR 包装器进行数据获取：

import useSWR from 'swr';
import { createSWRPostgrestClient } from '@supabase-cache-helpers/postgrest-swr';

const swrClient = createSWRPostgrestClient(supabase);

function App() {
  const { data, error } = useSWR('/users', swrClient.get);

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

3. 应用案例和最佳实践

案例1：实时数据更新

Supabase Cache Helpers 支持实时订阅更新，确保你的应用数据始终保持最新状态。以下是一个简单的实时数据更新示例：

import { useEffect } from 'react';
import { createSWRPostgrestClient } from '@supabase-cache-helpers/postgrest-swr';

const swrClient = createSWRPostgrestClient(supabase);

function RealTimeApp() {
  const { data, mutate } = useSWR('/messages', swrClient.get);

  useEffect(() => {
    const subscription = supabase
      .from('messages')
      .on('INSERT', payload => {
        mutate(prevData => [...prevData, payload.new], false);
      })
      .subscribe();

    return () => {
      subscription.unsubscribe();
    };
  }, [mutate]);

  if (!data) return <div>Loading...</div>;

  return (
    <ul>
      {data.map(message => (
        <li key={message.id}>{message.content}</li>
      ))}
    </ul>
  );
}

最佳实践

• 缓存策略：根据应用需求选择合适的缓存策略，如 SWR 的 stale-while-revalidate 策略。
• 错误处理：确保在数据获取失败时提供友好的错误提示。
• 性能优化：利用 Supabase Cache Helpers 的自动缓存填充功能，减少不必要的网络请求。

4. 典型生态项目

SWR

SWR 是一个用于数据获取的 React Hooks 库，特别适用于需要频繁更新的数据。Supabase Cache Helpers 提供了与 SWR 的无缝集成，简化了数据获取和缓存管理。

React Query

React Query 是另一个流行的数据获取库，提供了强大的缓存和状态管理功能。Supabase Cache Helpers 同样支持与 React Query 的集成，提供了类似的功能。

Supabase

Supabase 是一个开源的 Firebase 替代品，提供了实时数据库、身份验证、存储等功能。Supabase Cache Helpers 作为 Supabase 的补充工具，进一步简化了与 Supabase 的交互。

通过以上模块，你可以快速上手并深入了解 Supabase Cache Helpers 的使用。

supabase-cache-helpersA collection of framework specific Cache utilities for working with Supabase.项目地址:https://gitcode.com/gh_mirrors/su/supabase-cache-helpers