如何在SvelteKit中使用Supabase新增的GraphQL功能？

1. 安装依赖 #

首先安装GraphQL核心库和Svelte适配的urql客户端：

npm install graphql @urql/svelte

2. 创建GraphQL客户端实例 #

在src/lib目录下新建supabase-graphql.js，配置Supabase GraphQL端点和认证信息：

import { createClient } from '@urql/svelte';

// 替换为你的Supabase项目信息
const SUPABASE_PROJECT_ID = '你的项目ID';
const SUPABASE_API_KEY = '你的项目API密钥';

export const graphqlClient = createClient({
  url: `https://${SUPABASE_PROJECT_ID}.supabase.co/graphql/v1`,
  fetchOptions: () => {
    // 从本地存储获取Supabase Auth的访问令牌
    const authToken = localStorage.getItem('supabase.auth.token');
    return {
      headers: {
        'apikey': SUPABASE_API_KEY,
        ...(authToken && { Authorization: `Bearer ${authToken}` })
      }
    };
  }
});

3. 在组件中执行GraphQL查询 #

以src/routes/+page.svelte为例，编写查询并渲染结果：

<script>
  import { graphqlClient } from '$lib/supabase-graphql';
  import { query } from '@urql/svelte';

  // 定义GraphQL查询（替换为你的表结构）
  const GET_TODOS = `
    query GetTodos {
      todos {
        id
        title
        completed
      }
    }
  `;

  // 执行查询
  const queryResult = query({ query: GET_TODOS });
</script>

<!-- 处理加载、错误、成功状态 -->
{#if $queryResult.fetching}
  <p>加载数据中...</p>
{:else if $queryResult.error}
  <p>查询失败：{$queryResult.error.message}</p>
{:else}
  <div class="todos-list">
    <h3>我的待办</h3>
    <ul>
      {#each $queryResult.data.todos as todo}
        <li>{todo.title} {todo.completed ? '(已完成)' : ''}</li>
      {/each}
    </ul>
  </div>
{/if}

4. 结合Supabase Auth实现权限控制 #

如果你的Supabase表启用了行级安全（RLS），需要关联用户认证状态。在src/lib/supabase.js中初始化Supabase Auth并同步令牌：

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

const supabase = createClient('你的项目URL', '你的API密钥');

// 监听认证状态变化，同步令牌到GraphQL客户端
supabase.auth.onAuthStateChange((_event, session) => {
  if (session) {
    localStorage.setItem('supabase.auth.token', session.access_token);
    // 让urql重新获取数据以应用新的权限
    graphqlClient.invalidateQueries();
  } else {
    localStorage.removeItem('supabase.auth.token');
    graphqlClient.invalidateQueries();
  }
});

export { supabase };

5. 服务端渲染（SSR）场景下的使用 #

在SvelteKit的服务端加载函数（如+page.server.js）中，直接使用urql核心库发起查询：

import { createClient } from '@urql/core';

// 替换为你的Supabase项目信息
const SUPABASE_PROJECT_ID = '你的项目ID';
const SUPABASE_API_KEY = '你的项目API密钥';

export async function load({ locals }) {
  // 服务端创建临时客户端，使用locals中的会话令牌（需先配置Supabase Auth到locals）
  const client = createClient({
    url: `https://${SUPABASE_PROJECT_ID}.supabase.co/graphql/v1`,
    fetchOptions: {
      headers: {
        'apikey': SUPABASE_API_KEY,
        ...(locals.session?.access_token && {
          Authorization: `Bearer ${locals.session.access_token}`
        })
      }
    }
  });

  const { data, error } = await client.query(`
    query GetTodos {
      todos {
        id
        title
      }
    }
  `).toPromise();

  if (error) throw error;
  return { todos: data.todos };
}

在对应的页面组件中直接使用服务端返回的数据：

<script>
  export let data;
</script>

<h3>服务端渲染的待办列表</h3>
<ul>
  {#each data.todos as todo}
    <li>{todo.title}</li>
  {/each}
</ul>

内容的提问来源于stack exchange，提问作者ElendilTheTall