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)

[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 #?

[quick691fr]

ping ?

[alicanerdurmaz]

Hello, there are a couple of things that need to be fixed regarding this issue. For example, a PR has already been opened for it: #6573. However, things have been quite busy lately, and I haven’t found the time to address this problem.

We welcome all PRs, and if you'd like to work on this, we'd be more than happy. 🙌