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

Code before:
    expect(anotherSpy).not.toHaveBeenCalled()
  })

  it('should not create a suspense waterfall if prefetch is fired', async () => {
    const firstQueryOpts = {
      queryKey: queryKey(),
      queryFn: vi.fn().mockImplementation(async () => {
        await sleep(10)

        return 'Prefetch is nice!'
      }),
    }

    const secondQueryOpts = {
      queryKey: queryKey(),
      queryFn: vi.fn().mockImplementation(async () => {
        await sleep(10)

        return 'Prefetch is really nice!!'
      }),
    }

    const thirdQueryOpts = {
      queryKey: queryKey(),
      queryFn: vi.fn().mockImplementation(async () => {
        await sleep(10)

        return 'Prefetch does not create waterfalls!!'
      }),
    }

    function FirstSuspended() {
      const state = useSuspenseQuery(firstQueryOpts)

      return (
        <div>
          <div>data: {String(state.data)}</div>
        </div>
      )
    }

    function SecondSuspended() {
      const state = useSuspenseQuery(secondQueryOpts)

      return (
        <div>
          <div>data: {String(state.data)}</div>
        </div>
      )
    }


Review comment (bug):
can we please add another test where we have a failed query in the cache? This used to bite us when the implementation was still `ensureQueryData` - the query was there, but data was not.

I think you can get that with:


```
await queryClient.prefetchQuery({
  ...queryOpts,
  queryFn: () => { 
    throw new Error("oops")
  },
  retry: false
})
```

prefetching doesn't throw so there shouldn't be any try/catch needed.

Code after:
        <React.Suspense fallback="Loading...">
          <Suspended queryOpts={queryOpts} />
        </React.Suspense>
      )
    }

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

    await waitFor(() => rendered.getByText('data: Prefetch is nice!'))
    expect(queryOpts.queryFn).toHaveBeenCalledTimes(1)
  })

  it('should not prefetch query if query state exists', async () => {
    const queryOpts = createQueryOptions({ data: 'Prefetch is really nice!' })

    function App() {
      usePrefetchQuery(queryOpts)

      return (
        <React.Suspense fallback="Loading...">
          <Suspended queryOpts={queryOpts} />
        </React.Suspense>
      )
    }

    await queryClient.fetchQuery(queryOpts)
    ;(queryOpts.queryFn as Mock).mockClear()
    const rendered = renderWithClient(queryClient, <App />)

    expect(rendered.queryByText('fetching: true')).not.toBeInTheDocument()
    await waitFor(() => rendered.getByText('data: Prefetch is really nice!'))
    expect(queryOpts.queryFn).not.toHaveBeenCalled()
  })

  it('should display an error boundary if query cache is populated with an error', async () => {
    const queryOpts = createQueryOptions({ data: 'Not an error' })
    ;(queryOpts.queryFn as Mock).mockImplementationOnce(async () => {
      await sleep(10)

      throw new Error('Oops! Server error!')
    })

    function App() {
      usePrefetchQuery(queryOpts)

      return (
        <ErrorBoundary fallbackRender={() => <div>Oops!</div>}>
          <React.Suspense fallback="Loading...">
            <Suspended queryOpts={queryOpts} />
          </React.Suspense>
        </ErrorBoundary>