Liveprovider subscription update on filter param changed

[quick691fr]

Hi guys,

I'm trying to make a useList working with liveProvider and supabase when filter changed.

I have this code retrieving widgets from supabase :

const { data: widgetsData } = useList<IWidget>({
    resource: "widgets",
    filters: [
      {
        field: "dashboard_id",
        operator: "eq",
        value: dashboardId,
      },
    ],
  });

dashboardId is a prop of the component containing this useList, so basically, I can request this component with different dashboardId.

I checked the websocket and I got a subscription for realtime events :

realtime:resources/widgets:*:dashboard_id=eq.2

and realtime changes on widgets of dashboard 2 is working fine.

But when I changed my dashboardId Props by selecting a new dashboard on an external Select, the realtime subscription is not updated and I didn't get LiveEvents on new dashboard. My guess is the realtime subscription should reflect the filter change ??

Thanks

[alicanerdurmaz]

Hello @quick691fr,

There is a similar issue here.

Removing filters from the subscription will be a solution. This way, the widgets table will be invalidated on any change, regardless of the filters.

This might cause unnecessary invalidation in some cases, but I don't think it's a big problem.

[quick691fr]

Strange, I copy paste your code and still have no realtime topic changed, what version are you using ?

[quick691fr]

My bad, apparently, the one doing the job is :

const { selectProps, query, defaultValueQuery } = useSelect({
resource: "categories",
defaultValue: categoryId,
});

[quick691fr]

Strange that the defaultValue on category useSelect fix realtime subscription on blog_posts useList in another component ??

[alicanerdurmaz]

Oh, no. Sorry for the confusion.

We have 2 issues in this case:

1. Ant Design's <Select /> gives an error when options are changed. Some other people reported that too.
2. <PostList categoryId={categoryId} /> uses useList with a resource of blog_posts and filters query with categorId but useList doesn't subscribe again when filters are changed. This is a bug from Refine, re-mounting the component is working but is not an ideal solution.

Changing defaultValue is working because it updates defaultValueQuery.isFetching to true and we are re-mounting the <PostList />. It's a bit tricky and confusing workaround but I believe it's good while we work on this bug.

[alicanerdurmaz]

This works too. I think this is a more descriptive example.

Example with unique key prop:

'use client'

import { PostList } from '@components/post-list'
import { useSelect } from '@refinedev/antd'
import type { BaseOption } from '@refinedev/core'
import { Flex, Select } from 'antd'
import { useState } from 'react'

export default function LiveProviderList() {
  const [categoryId, setCategoryId] = useState<number>(5)
  const { selectProps } = useSelect({
    resource: 'categories',
  })

  return (
    <Flex vertical justify='center' align='center' style={{ width: '100%' }}>
      <Select
        key={`select-${categoryId}`}
        style={{ width: '250px' }}
        defaultValue={categoryId as unknown as BaseOption}
        {...selectProps}
        onSelect={(value) => {
          setCategoryId(Number(value))
        }}
      />
      <PostList key={`post-list-${categoryId}`} categoryId={categoryId} />
    </Flex>
  )
}
``

[amerryma]

I too am running into this issue. Switching to useList does work because it listens for all changes on my table.

Desired:

  const { data: job } = useOne<JobResult, HttpError, JobResult>({
    resource: 'job_results',
    liveMode: 'auto',
    id: jobKey,
  })

Workaround:

  const { data: jobs } = useList<JobResult, HttpError, JobResult>({
    resource: 'job_results',
    liveMode: 'auto',
    pagination: {
      pageSize: 1,
    },
    sorters: [{ field: 'created_at', order: 'desc' }],
  })
  console.log('jobs', jobs)
  const job = jobs?.data?.find((job) => job.id === jobKey)

[quick691fr]

I too am running into this issue. Switching to useList does work because it listens for all changes on my table.

Desired:

  const { data: job } = useOne<JobResult, HttpError, JobResult>({
    resource: 'job_results',
    liveMode: 'auto',
    id: jobKey,
  })

Workaround:

  const { data: jobs } = useList<JobResult, HttpError, JobResult>({
    resource: 'job_results',
    liveMode: 'auto',
    pagination: {
      pageSize: 1,
    },
    sorters: [{ field: 'created_at', order: 'desc' }],
  })
  console.log('jobs', jobs)
  const job = jobs?.data?.find((job) => job.id === jobKey)

Yes, it works without filter but then you subscribe to whole * updates which is not efficient regarding the database, specially if you have frequent updates.

[amerryma]

Ya, definitely not ideal. And to be clear, my failure doesn't happen as long as the ID never changes while the component is mounted, but once the ID changes, it fails to switch to the new subscription.

I will try the liveParams soon.

[amerryma]

Ya liveParams still doesn't change the subscription if jobKey were to change without remounting the component.

[alicanerdurmaz]

Thanks for the detailed explanation. We will look into this remounting issue.

[quick691fr]

Thanks for the detailed explanation. We will look into this remounting issue.

@alicanerdurmaz any news or issue #?