`suspense: true` is not triggering Suspense

Hello,

In my codebase I have the following code:

export function useUser() {
  const query = useQuery({
    queryKey: ['auth', 'useUser'],
    queryFn: async () => {
      // do some stuff
    },
    suspense: true,
    networkMode: 'offlineFirst',
    cacheTime: ms('1 day'),
    staleTime: ms('1 hour'),
  });

  if (!query.data) {
    throw new Error('Suspense not called on useUser');
  }

  return query;
}

export function useUser() {
  const query = useQuery({
    queryKey: ['auth', 'useUser'],
    queryFn: async () => {
      // do some stuff
    },
    suspense: true,
    networkMode: 'offlineFirst',
    cacheTime: ms('1 day'),
    staleTime: ms('1 hour'),
  });

  if (!query.data) {
    throw new Error('Suspense not called on useUser');
  }

  return query;
}

However it throws

Suspense not called on useUser

Suspense not called on useUser

. I thought the way that suspense worked is that

useQuery

useQuery

itself would throw an object that would be caught by the parent

Suspense

Suspense

component and would not continue to the next line until the request is completed. Do I misunderstand?

TanStack•4y ago•

19 replies

clean-aquamarine

`suspense: true` is not triggering Suspense

Hello,

In my codebase I have the following code:

export function useUser() {
  const query = useQuery({
    queryKey: ['auth', 'useUser'],
    queryFn: async () => {
      // do some stuff
    },
    suspense: true,
    networkMode: 'offlineFirst',
    cacheTime: ms('1 day'),
    staleTime: ms('1 hour'),
  });

  if (!query.data) {
    throw new Error('Suspense not called on useUser');
  }

  return query;
}

export function useUser() {
  const query = useQuery({
    queryKey: ['auth', 'useUser'],
    queryFn: async () => {
      // do some stuff
    },
    suspense: true,
    networkMode: 'offlineFirst',
    cacheTime: ms('1 day'),
    staleTime: ms('1 hour'),
  });

  if (!query.data) {
    throw new Error('Suspense not called on useUser');
  }

  return query;
}

However it throws

Suspense not called on useUser

Suspense not called on useUser

. I thought the way that suspense worked is that

useQuery

useQuery

itself would throw an object that would be caught by the parent

Suspense

Suspense

component and would not continue to the next line until the request is completed. Do I misunderstand?

`suspense: true` is not triggering Suspense

Similar Threads

`suspense: true` is not triggering Suspense

Similar Threads

Similar Threads

Similar Threads