Repository: tannerlinsley/react-query
File: packages/react-query/src/__tests__/useQueries.test.tsx (TypeScript)

Code before:
      res: 'first result 1,second result 1',
    })

    fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))

    await vi.advanceTimersByTimeAsync(100)
    // no further re-render because data didn't change
    expect(results.length).toBe(length)
  })

  it('should synchronously track properties of all observer even if a property (isLoading) is only accessed on one observer (#7000)', async () => {
    const key = queryKey()
    const ids = [1, 2]

    function Page() {
      const { isLoading } = useQueries({
        queries: ids.map((id) => ({
          queryKey: [key, id],
          queryFn: async () => {
            if (id === 2) {
              await sleep(10)
              return Promise.reject(new Error('FAILURE'))
            }
            await sleep(10)
            return Promise.resolve({ id, title: `Post ${id}` })
          },
          retry: false,
        })),
        combine: (results) => {
          // this tracks data on all observers
          void results.forEach((result) => result.data)
          return {
            // .some aborts early, so `isLoading` might not be accessed (and thus tracked) on all observers
            // leading to missing re-renders
            isLoading: results.some((result) => result.isLoading),
          }
        },
      })

      return (
        <div>
          <p>Loading Status: {isLoading ? 'Loading...' : 'Loaded'}</p>
        </div>
      )
    }

    const rendered = renderWithClient(queryClient, <Page />)

    expect(rendered.getByText('Loading Status: Loading...')).toBeInTheDocument()

    await vi.advanceTimersByTimeAsync(11)

Review comment (bug):
This is just a small thing I wanna make like this.

```suggestion
          queryFn: () => sleep(10).then(() => {
            if(id === 2) throw new Error('FAILURE')
            return { id, title: `Post ${id}` }
          }),
```

Code after:
      res: 'first result 1,second result 1',
    })

    fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))

    await vi.advanceTimersByTimeAsync(100)
    // no further re-render because data didn't change
    expect(results.length).toBe(length)
  })

  it('should synchronously track properties of all observer even if a property (isLoading) is only accessed on one observer (#7000)', async () => {
    const key = queryKey()
    const ids = [1, 2]

    function Page() {
      const { isLoading } = useQueries({
        queries: ids.map((id) => ({
          queryKey: [key, id],
          queryFn: () =>
            sleep(10).then(() => {
              if (id === 2) throw new Error('FAILURE')
              return { id, title: `Post ${id}` }
            }),
          retry: false,
        })),
        combine: (results) => {
          // this tracks data on all observers
          void results.forEach((result) => result.data)
          return {
            // .some aborts early, so `isLoading` might not be accessed (and thus tracked) on all observers
            // leading to missing re-renders
            isLoading: results.some((result) => result.isLoading),
          }
        },
      })

      return (
        <div>
          <p>Loading Status: {isLoading ? 'Loading...' : 'Loaded'}</p>
        </div>
      )
    }

    const rendered = renderWithClient(queryClient, <Page />)

    expect(rendered.getByText('Loading Status: Loading...')).toBeInTheDocument()

    await vi.advanceTimersByTimeAsync(11)
    expect(rendered.getByText('Loading Status: Loaded')).toBeInTheDocument()
  })