What is the best way to ensure the query runs automatically only during initialization, even if the query key updates later?

[EkaLinMan]

I have a query that must provide data automatically when the component initializes. The query key updates after submitting the form data, but instead of immediately fetching data from the backend, I plan to update the query data at the appropriate time using the approach below.

1. The setQueryData method from QueryClient is used to create new cache data for the updated query key after submission.
2. The refetch method from useQuery is used to enable the reloading feature.

I have decided to disable the query after its first fetch is successful, preventing it from running automatically even if the query key updates later. Please check the sample code:

const [enabled, setEnabled] = useState(true);
const [param, setParam] = useState()

const {isFetching, isSuccess, data, refetch} = useQuery({
    queryKey: [param],
    queryFn: () => fetchItems({param}),
    enabled: enabled,
});

useEffect(() => {
    // Please correct me if I'm wrong: `isSuccess` may remain true if the component has been opened successfully before.  
    // I want the query to be disabled only after its first fetch is successful.
    if(!isFetching && isSuccess){
        setEnabled(false);
    }
}, [isFetching, isSuccess])

Is that okay for you, or do you have other suggestions? thanks for helping!

[EkaLinMan]

I also have a question about refetch invoking, does it make all the queries with the same key to refetch?