data is undefined when using refetch with enabled=false

[khanakia]

Describe the bug

When i refetch with enabled=false data is undefined but the strange thing is when I press backspace it returns the data

'use client';
import { useState } from 'react';
import { useFuncToolsQuery } from '~/generated/aitools/graphql';

export default function DynamicEntitySelect() {
  const [inputValue, setInputValue] = useState('');

  const { data, isFetching, refetch, isLoading } = useFuncToolsQuery(
    {
      first: 100,
      where: {
        ...(inputValue ? { nameContainsFold: inputValue } : {}),
      },
    },
    {
      // enabled: !isBlank(workspaceId),
      enabled: false,
      staleTime: 0,
      // keepPreviousData: true,
    }
  );
  console.log('data', data, isLoading);

  return (
    <>
      <input
        className='border'
        type='text'
        onChange={(e) => {
          setInputValue(e.target.value);
          refetch();
        }}
      />
    </>
  );
}

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-query-ac2kebkt?file=src%2Findex.tsx

Steps to reproduce

• Copy and paste iphone
• Now press backspace it still searches for iphone not iphon

Expected behavior

it should search for data

How often does this bug happen?

None

Screenshots or Videos

Screen.Recording.2025-03-27.at.9.09.52.PM.mov

Platform

• OS: MAc
• Browser: Chrome
• Version: "@tanstack/react-query": "^5.67.3"

Tanstack Query adapter

react-query

TanStack Query version

5.67.3

TypeScript version

5.8.2

Additional context

No response

[Odinaev444]

There is no bug in the library!
Your implementation is incorrect.
Correct version :

import React from 'react';
import { useState,useEffect} from 'react';
import ReactDOM from 'react-dom/client';
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools />
      <Example />
    </QueryClientProvider>
  );
}

function Example() {
  const [inputValue, setInputValue] = useState('');
  const { isPending, error, data, isFetching, refetch } = useQuery({
    queryKey: ['repoData'],
    queryFn: async () => {
      console.log(
        `https://dummyjson.com/products/search?q=${inputValue}&select=title&limit=2`
      );
      const response = await fetch(
        // `https://api.github.com/repos/${inputValue}/query`
        `https://dummyjson.com/products/search?q=${inputValue}&select=title&limit=2`
      );
      return await response.json();
    },
    enabled: false,
  });


  useEffect(()=>{
    if(inputValue){
      refetch();
    }
  },[inputValue])

  // if (isPending) return 'Loading...';

  if (error) return 'An error has occurred: ' + error.message;

  const dataString = JSON.stringify(data);

  return (
    <div>
      <input
        value={inputValue}
        className="border"
        type="text"
        onChange={(e) => {
          setInputValue(e.target.value);
        }}
      />
      <div>{isFetching ? 'Updating...' : ''}</div>
      {dataString}
    </div>
  );
}

If it is just for practice ok , but in real project you should also extract you business logic in separate hook. ))

[TkDodo]

Correct version :

sorry to say this isn’t the correct version. You want enabled to be set to !!inputValue, as described in the Lazy Queries section in the docs.