useSWRInfinite support deduplication

[igoldny]

What I am doing and trying to achieve

I am using useSWRInfinite for the pagination feature and this hook is mounted multiple times by different components which request the exact same requests multiple times.

Expected behavior

I expect the same behavior as useSWR deduplication, the first request is called and the others reuse the same request to avoid duplicated requests for better performance.

Actual behavior

multiple components mounted with useSWRInfinite calling duplicated requests without reusing them, causing unnecessary requests that impact page performance.

I would really appreciate any help
Thank you :) 👍

[koba04]

@igoldny
Could you reproduce it?
I've created the following test and the test has been passed.

  it('should dedupe infinite requests', async () => {
    const requestLogs = [];
    const key = createKey()

    const  Data = ({ prefix }: { prefix: string }) => {
      const { data } = useSWRInfinite(
        index => `data-${index}-${key}`,
        infiniteKey => {
          requestLogs.push(infiniteKey)
          return createResponse(infiniteKey)
        }
      )
      return <div>{prefix}:{data}</div>;
    }

    const Page = () => {
      return (
        <>
          <Data prefix="a" />
          <Data prefix="b" />
        </>
      )
    }

    renderWithConfig(<Page />)
    await screen.findByText(`a:data-0-${key}`)
    await screen.findByText(`b:data-0-${key}`)
    expect(requestLogs).toEqual([`data-0-${key}`])
  })

[xu3u4]

Hi @koba04
I feel the deduplication doesn't work if more than one page needs to be fetched.
Could you help to check this case 🙏

it('should dedupe infinite requests', async () => {
    const requestLogs = [];
    const key = createKey()
    const  Data = ({ prefix }: { prefix: string }) => {

      const { data, setSize, size } = useSWRInfinite(
        index => `data-${index}-${key}`,
        infiniteKey => {
          requestLogs.push(infiniteKey)
          return createResponse(infiniteKey)
        }
      )
      useEffect(() => {
        if (size < 2) {
          setSize(size + 1);
        }
      }, []);

      return <div>{prefix}:{data?.[1]}</div>;
    }


    const Page = () => {
      return (
        <>
          <Data prefix="a" />
          <Data prefix="b" />
        </>
      )
    }

    const { findByText } = renderWithConfig(<Page />)
    await findByText(`a:data-1-${key}`)
    await findByText(`b:data-1-${key}`)
    expect(requestLogs).toEqual([`data-0-${key}`, `data-1-${key}`])
  })

[koba04]

@xu3u4
Thank you for the test case!
The following example works fine.

  it('should dedupe infinite requests', async () => {
    const requestLogs = [];
    const key = createKey()
    const Data = ({ prefix }: { prefix: string }) => {

      const { data, setSize, size } = useSWRInfinite(
        index => `data-${index}-${key}`,
        infiniteKey => {
          requestLogs.push(infiniteKey)
          return createResponse(infiniteKey)
        },
        {
          revalidateFirstPage: false
        }
      )
      return <button onClick={() => setSize(size + 1)}>{prefix}:{data}</button>;
    }


    const Page = () => {
      return (
        <>
          <Data prefix="a" />
          <Data prefix="b" />
        </>
      )
    }

    renderWithConfig(<Page />)
    await screen.findByText(`a:data-0-${key}`)

    fireEvent.click(screen.getByText(`a:data-0-${key}`))
    await screen.findByText(`a:data-0-${key}data-1-${key}`)
    expect(requestLogs).toEqual([`data-0-${key}`, `data-1-${key}`])
  })

I feel the deduplication doesn't work if more than one page needs to be fetched.

Your example is tricky because it runs setSize while loading (in useEffect).
You should also use revalidateFirstPage: false to avoid loading page 0.
The problem might happen only in this case, not in loading more than one page.

[xu3u4]

@koba04 Thank you for your reply.
If there is a need to get all pages at once instead of triggering the next page by a click, what would you suggest to do that? 🙏

[koba04]

@xu3u4

I think initialSize is the option for your case.

  it('should dedupe infinite requests', async () => {
    const requestLogs = [];
    const key = createKey()
    const Data = ({ prefix }: { prefix: string }) => {

      const { data } = useSWRInfinite(
        index => `data-${index}-${key}`,
        infiniteKey => {
          requestLogs.push(infiniteKey)
          return createResponse(infiniteKey)
        },
        {
          revalidateFirstPage: false,
          initialSize: 2
        }
      )
      return <div>{prefix}:{data}</div>;
    }


    const Page = () => {
      return (
        <>
          <Data prefix="a" />
          <Data prefix="b" />
        </>
      )
    }

    renderWithConfig(<Page />)
    await screen.findByText(`a:data-0-${key}data-1-${key}`)
    expect(requestLogs).toEqual([`data-0-${key}`, `data-1-${key}`])
  })

[xu3u4]

Thank you very much, caching works well with initialSize!