如何在React Admin中使用ilike而不是eq过滤器搜索Supabase数据库?

huangapple go评论59阅读模式
英文:

How can I search Supabase database in React Admin using ilike instead of eq filter?

问题

我有一个与我的Supabase数据库连接的React Admin应用程序。在这个数据库中,我有一个名为“posts”的表。我的目标是能够通过React Admin搜索这些帖子的标题。
例如,我有两篇帖子{id:1, title: "第一篇帖子"}和{id:2, title: "第二篇帖子"}. 当我使用以下代码搜索"第二篇"时:

const postFilters = [
    <TextInput source="title" label="按标题搜索" alwaysOn />,
];

export const PostList = () => (
    <List filters={postFilters}>
      <Datagrid>
        <TextField source="id" />
        <TextField source="title" />
        <EditButton />
        <ShowButton />
      </Datagrid>
    </List>
);

它不会返回任何结果,因为它要求严格的相等性。如果我将"第二篇帖子"作为搜索词输入,它将给我期望的结果。

我尝试将我的<TextInput/>更改为<SearchInput />,如下所示:<SearchInput source="title" alwaysOn />,但它没有改变任何内容。

我可以在我的数据库日志中看到这个URL:/post?title=eq.second。我认为如果我能够将title=eq.second更改为类似title=ilike.second的形式,它应该可以工作,但我不知道如何做到这一点。

英文:

I have a react admin application linked to my supabase database. I have a posts table in this database. My aim is to be able to search the titles of these posts via react admin.
For example, I have two posts {id:1, title: "first post"} and {id:2, title: "second post"}. When I do a search for "second" using this code :

const postFilters = [
    &lt;TextInput source=&quot;title&quot; label=&quot;Search by title&quot; alwaysOn /&gt;,
];

export const PostList = () =&gt; (
    &lt;List filters={postFilters} &gt;
      &lt;Datagrid &gt;
        &lt;TextField source=&quot;id&quot; /&gt;
        &lt;TextField source=&quot;title&quot; /&gt;
        &lt;EditButton /&gt;
        &lt;ShowButton /&gt;
      &lt;/Datagrid&gt;
    &lt;/List&gt;
);

It doesn't return any results because it wants a strict equality. If I type "second post" as search term, it will give me the result expected.

I have tried to change my <TextInput/> by a <SearchInput /> like that : &lt;SearchInput source=&quot;title&quot; alwaysOn /&gt; but it don't change anything.

I can see on my database logs this url : /post?title=eq.second. I think if I can be able to change title=eq.second to somthing like title=ilike.second it should work but I don't know how to do it.

答案1

得分: 1

谢谢你给我检查我的 DataProvider 源代码的想法,@MaxAlex。
我使用 ra-data-postgrest,在阅读它在 node_modules 中的 README 后,我看到我们可以简单地这样做:
<TextInput source="title@ilike" label="Search by title" alwaysOn />

英文:

Thank you for giving me the idea to check the source code of my DataProvider @MaxAlex.
I use ra-data-postgrest and after reading its README in node_modules, I saw that we can simply do this :
&lt;TextInput source=&quot;title@ilike&quot; label=&quot;Search by title&quot; alwaysOn /&gt;.

答案2

得分: 0

关于筛选操作符的一般信息

最终发送给服务器的请求是在您的 DataProvider 内部形成的。
您需要更改 DataProvider getList 方法的实现。

您可以以多种方式实现这一点:

  1. 克隆您的 DataProvider 的源代码并更改 getList 的实现。

  2. 以相同的方式为原始 DataProvider 实现一个包装器
    在其中更改查询参数并使用新参数调用原始 DataProvider。

  3. 使用withLifecycleCallbacks() 方法来装饰 DataProvider。
    beforeGetList(params, dataProvider) 内部,覆盖参数并返回新的参数。

英文:

General information about Filter Operators

The final request to server is formed inside your DataProvider.
You need to change implementation of DataProvider getList method.

You can do this in various ways:

  1. Clone the source code of your DataProvider and change the implementation of getList.

  2. Implement a wrapper for the original DataProvider in the same way.
    Inside it, change the query parameters and call the original DataProvider with the new parameters.

  3. Use the withLifecycleCallbacks() method to decorate the DataProvider.
    Inside the beforeGetList(params, dataProvider), override params and return new parameters.

huangapple
  • 本文由 发表于 2023年5月26日 17:07:00
  • 转载请务必保留本文链接:https://go.coder-hub.com/76339303.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定