如何将 Redux RTK 查询与 Supabase 结合使用

Question

有谁知道如何将 Supabase 查询模式与 RTK 查询结合使用，例如 https://dev.to/sruhleder/using-react-query-with-supabase-a03.

Answer 1

虽然我根本没有使用过 Supabase，但看起来它提供了一个基于 Promise 的异步请求 API。

在这种情况下，您可以将其与 RTK 查询的

queryFn

端点选项一起使用，它允许您编写自己的任意异步逻辑并返回您想要的任何数据。

虽然我尚未测试此代码，但 React Query + Supabase 示例到 RTKQ 的翻译可能如下所示：

import { createApi, fakeBaseQuery } from '@reduxjs/toolkit/react';

const supabaseApi = createApi({
  baseQuery: fakeBaseQuery(),
  endpoints: (builder) => ({
    getTodos: builder.query({
      queryFn: async () => {
        const {data, error} = await supabase
          .from('todo')
          .select('id, name')
          .eq('done', false)

        return data;
      }
    })
  })
})

Answer 2

我已经对此争论了一段时间，直到我在文档中看到 RTK 查询期望

data

不是一个完整的对象，而是 作为一个属性。

所以上面的代码示例需要更改返回值，如下所示：

import { createApi, fakeBaseQuery } from '@reduxjs/toolkit/react';

const supabaseApi = createApi({
  baseQuery: fakeBaseQuery(),
  endpoints: (builder) => ({
    getTodos: builder.query({
      queryFn: async () => {
        const {data, error} = await supabase
          .from('todo')
          .select('id, name')
          .eq('done', false)

        if (error) {
          throw { error };
        }

        return { data };
      }
    })
  })
})

export const { useGetTodosQuery } = supabaseApi
export { supabaseApi }

Answer 3

我想分享对最后一个答案的改进，以便能够使用打字稿处理错误。您可以在此处和此处找到参考。

supabase-base-query.ts

import type { BaseQueryFn } from "@reduxjs/toolkit/query"
import { PostgrestError } from "@supabase/supabase-js";

const _NEVER = /* @__PURE__ */ Symbol()
export type NEVER = typeof _NEVER

/**
 * Creates a "fake" baseQuery to be used if your api *only* uses the `queryFn` definition syntax.
 * This also allows you to specify a specific error type to be shared by all your `queryFn` definitions.
 */
export const supabaseBaseQuery = (): BaseQueryFn<
  void,
  NEVER,
  PostgrestError,
  {}
> => {
  return function () {
    throw new Error(
      'When using `supabaseBaseQuery`, all queries & mutations must use the `queryFn` definition syntax.',
    )
  }
}

todo.ts

import { createApi } from '@reduxjs/toolkit/react';
import { supabaseBaseQuery } from "@/libs/supabase-base-query";
import { supabaseClient } from "@/libs/supabase";
import { Tables } from "src/types/supabase";

const todoApi = createApi({
  baseQuery: supabaseBaseQuery(),
  endpoints: (builder) => ({
    getTodos: builder.query<Tables<"todo">, void>({
      queryFn: async () => {
        const {data, error} = await supabase
          .from('todo')
          .select('id, name')
          .eq('done', false)

        if (error) {
          return { error };
        }

        return { data };
      }
    })
  })
})

export const { useGetTodosQuery } = todoApi
export { todoApi }

用于在 src/types 文件夹中生成类型的额外脚本。它可以作为“generate-types”：“node genSupaTypes.js”添加到 package.json 的脚本部分。 参考

genSupaTypes.js

require('dotenv').config({ path: '.env.development' });
const { execSync } = require('child_process');

try {
  execSync(`npx supabase gen types typescript --project-id ${process.env.EXPO_PUBLIC_SUPABASE_PROJECT_ID} --schema public > src/types/supabase.ts`);
  console.log('Supabase types generated successfully!');
} catch (error) {
  console.error('Error generating Supabase types:', error);
}