Pattern 3

Skip Token for Declarative Skipping

Use skipToken to declaratively skip queries when data is missing. Unlike enabled: false, skipToken is a value that can be passed to queryFn.

import { skipToken } from '@tanstack/react-query'

const [postId, setPostId] = useState<number | null>(null)

const result = useQuery({
  queryKey: ['post', postId],
  queryFn: postId ? () => fetchPostById(postId) : skipToken,
})

Select Post ID

No post selected (using skipToken)

Query State

isPending: trueisFetching: falseisLoading: falseisError: falseisSuccess: false

status: pendingfetchStatus: idle

No post selected

Choose a post ID to run the query with skipToken.