如何使用Redux RTK查询与数据库

Question

有人知道如何将SubaseQuery模式与RTK Query结合使用吗https://dev.to/sruhleder/using-react-query-with-supabase-a03.

Answer 1

虽然我根本没有使用过Subabase，但它似乎提供了一个基于Promise-based的异步请求API。

在这种情况下，您可以将其与RTK Query的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 Query期望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 }