Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: improve Supabase liveProvider filter handling #6573

Open
wants to merge 10 commits into
base: next
Choose a base branch
from
8 changes: 8 additions & 0 deletions .changeset/shiny-panthers-nail.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"@refinedev/supabase": patch
---

fix: handle multiple filters in Supabase liveProvider.
This update addresses the handling of multiple filters in the Supabase liveProvider. It ensures only the first filter is applied and introduces a configurable `meta.realtimeFilter` option for custom filter behavior. A warning is logged when multiple filters are detected.

Resolves [#6360](https://github.com/refinedev/refine/issues/6360)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Resolves [#6360](https://github.com/refinedev/refine/issues/6360)
[Resolves #6360](https://github.com/refinedev/refine/issues/6360)

26 changes: 22 additions & 4 deletions packages/supabase/src/liveProvider/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import type {
import { liveTypes, supabaseTypes } from "../types";
import { mapOperator } from "../utils";

const supportedOperators = ["eq", "neq", "gt", "lt", "gte", "lte"];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"neq" is not a valid operator in Refine. We use "ne" instead. Please check mapOperator utility to confirm. This variable can have CrudFilters[] type defined for safety.


export const liveProvider = (
supabaseClient: SupabaseClient<any, any, any>,
): LiveProvider => {
Expand Down Expand Up @@ -49,14 +51,30 @@ export const liveProvider = (
}
};

const mapFilter = (filters?: CrudFilters): string | undefined => {
const mapFilter = (
filters?: CrudFilters,
meta?: any,
): string | undefined => {
if (!filters || filters?.length === 0) {
return;
}

return filters
if (filters.length > 1) {
console.warn(
"Warning: Multiple filters detected. Supabase Realtime currently supports only a single filter. The first filter will be applied. To customize this behavior, use the 'meta.realtimeFilter' property.",
);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This always logs a warning even if meta.realtimeFilter is set.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please consider using warn-once with a proper key (resource can be used) to prevent polluting user console.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've implemented warnOnce for the multiple filter warning and tested it locally. Here's a screen recording of the behavior, let me know if this aligns with what you were expecting!

Screen.Recording.2025-01-01.231040.mp4

}

const effectiveFilter = meta?.realtimeFilter
? [meta.realtimeFilter]
: [filters[0]];

return effectiveFilter
.map((filter: CrudFilter): string | undefined => {
if ("field" in filter) {
if (
"field" in filter &&
supportedOperators.includes(filter.operator)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This also needs to be logged if unsupported filters are used.

) {
return `${filter.field}=${mapOperator(filter.operator)}.${
filter.value
}`;
Expand All @@ -70,7 +88,7 @@ export const liveProvider = (
const events = types
.map((x) => supabaseTypes[x])
.sort((a, b) => a.localeCompare(b));
const filter = mapFilter(params?.filters);
const filter = mapFilter(params?.filters, meta);
const ch = `${channel}:${events.join("|")}${filter ? `:${filter}` : ""}`;

let client = supabaseClient.channel(ch);
Expand Down
Loading