Supabase filtering and realtime(live) filtering
Im using refine with supabase i have messages that should update in realtime on the admin panel. Im using liveProvider for realtime.
message table has from_id and to_id fields
const messages = useList({
resource: "message",
liveMode: "auto",
sorters: [{ field: "created_at", order: "asc" }],
pagination: {
pageSize: 100,
},
})
this is my list
I want to filter the messages so i get messages where:
from_id equeals to senderId or recieverId
or to_id equeals to senderId or recieverId
senderId and recieverId are the params i pass
the problem is when i add
filters: [
{
operator: "or",
value: [
{
field: "from_id",
operator: "in",
value:
(${userId},${env.BOT_ID}),
},
{
field: "to_id",
operator: "in",
value: (${userId},${env.BOT_ID}),
},
],
},
],
it works fine for getting the list of messages but does not work for liveprovider (subscription for the event can't be created)
so how do i do it?2 Replies
Hi @danyalutsevich. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, there are a few important points to consider regarding your question about Supabase filtering and realtime (live) filtering with refine:
1. Multiple Filters Issue: There is a known issue with Supabase Realtime not supporting multiple filters. This is discussed in detail in the GitHub issue #6360 (https://github.com/refinedev/refine/issues/6360). The current implementation in refine's Supabase live provider joins multiple filters with a comma, which results in an invalid filter payload for Supabase Realtime.
2. Workaround Suggestions:
- One suggestion is to use a single filter that covers most of your filtering needs on the server-side and then perform additional filtering on the client-side.
- Another proposed solution is to allow users to override the filter using a
meta.realtimeFilter property.
3. Current Status: The refine team is aware of this limitation and is considering showing a warning when multiple filters are used and allowing users to override the liveProvider's filters using the meta.realtimeFilters prop. However, this feature is not yet implemented.
4. Supabase Realtime Limitations: Supabase Realtime does not support complex and relation-based filters as expected. This is why the refine team initially considered removing filters from the subscription altogether.
Given these constraints, here are some suggestions for your specific use case:
1. Simplify Your Filter: Try using a single filter that covers the most critical part of your filtering needs. For example, you could filter on just the from_id or to_id field, whichever is more important for your use case.
2. Client-side Filtering: After receiving the real-time updates, you can perform additional filtering on the client-side to match your exact requirements.
3. Use meta.realtimeFilters: Although not officially implemented yet, you could try using the meta.realtimeFilters prop to override the live provider's filters. This is a proposed solution mentioned in the GitHub issue discussion (https://github.com/refinedev/refine/issues/6360).
4. Manual Subscription: As a last resort, you could consider manually subscribing to the changes and refetching the data when changes occur, as suggested in the Supabase FAQ (https://refine.dev/docs/data/packages/supabase/#faq) for handling relational data changes.
It's important to note that this is a known limitation of Supabase Realtime, and the refine team is actively working on finding the best solution. For the most up-to-date information and potential workarounds, I recommend following the GitHub issue #6360 (https://github.com/refinedev/refine/issues/6360) and considering contributing to the discussion if you have additional insights or use cases.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@447478993101389824> Kapa.ai is still learning and improving, please let me know how I did by reacting below.