Proper way to initiate atomWithQuery only on event?

[Akkuma]

I have an atomWithQuery that I'd like to only run after a button click. I have it wired up and working when using an atom to determine enabled state, but when I force it to disabled enabled: false the loading begins, but never completes

export const search = atomWithQuery((get) => ({
    queryKey: [get(searchTerm), get(searchLocation)],
    queryFn: async ({ queryKey: [term, location]}) => {
        // Fetch logic
        
        const json = await res.json()
       // other stuff
        return json
    },
    enabled: false
}))

//A separate hook
const useSearch = () => {
    const setEnabledSearch = useUpdateAtom(enabledSearch)
    const startSearch = useUpdateAtom(searchResult)

    const search = useCallback(() => {
        setEnabledSearch(true)
        startSearch({ type: 'refetch'})
    }, [startSearch])

  return { search }
}

// Component onClick event <Comp onClick={search} />

[dai-shi]

While I think running on button click should be handled in an imperative way (= callback function), there's no such things now except for refetch...

To avoid suspending with enabled: false, you need to provide initialData. We have been struggling with this behavior, and it's not clearly documented yet. cc: @aulneau

[Akkuma]

That doesn't seem to do the trick for me setting initialData. If I edit the code at https://github.com/pmndrs/jotai/blob/main/src/query/atomWithQuery.ts#L164-L166 to be attached regardless of enabled/disabled state it works. If I understand the code correctly, that without this subscribe nothing else matters as it'll never pick up on the manual refetch performed at https://github.com/pmndrs/jotai/blob/main/src/query/atomWithQuery.ts#L175-L177.

[dai-shi]

Hm, so there's some misunderstanding of mine. sorry about it. let's see how the other thread goes.

If enabled: false, we can't refetch, which is expected. (not sure if it's ideal.)

[Akkuma]

I think it could make sense to allow some way of forcing a fetch regardless of if it is "enabled".

[dai-shi]

Yeah, that's probably related to what I meant with my very first line in the comment. We'd like to basically follow how useQuery in RQ works, if possible. Do you know if we can invoke fetch function if it's disabled with useQuery? How would you do it with bare RQ? (I mean, I'm not super familiar with RQ. 😛 )

[aulneau]

Hi there! I made a small sandbox with what I understand your goals to be: https://codesandbox.io/s/vibrant-bhaskara-c5s7f

And it seems to be functioning, please let me know if I am missing something.

[aulneau]

Here is a more verbose example with a similar requirement that you've described: https://codesandbox.io/s/dank-smoke-w3rcq?file=/src/App.tsx:165-196 does this help?

[aulneau]

The important thing is to disable the query when the input changes

[Akkuma]

That definitely works. Thanks! I approached it from a singular place, since I see you're disabling on a per input basis.

I did this:

const term = useAtomValue(searchTerm)
const location = useAtomValue(searchLocation)
const setQueryParams = useUpdateAtom(searchQueryParams)

const search = useCallback(() => {
  setQueryParams({ term, location })
  setEnabledSearch(true)
}, [term, location])

queryKey: [get(searchQueryParams)],
queryFn: async ({ queryKey: [{term, location}]})

I think the "easiest" recipe is update a singular atom on callback for anything that might be dynamic, so it'll only trigger appropriately through the event callback. The downside this causes additional renders as term, location, and search will be changing.

[Akkuma]

Using your solution I reworked it into a hook that I could reuse:

import { useUpdateAtom } from "jotai/utils"
import { useCallback } from "react"
import { isSearchEnabled } from "../atoms/search"

const useSearchInput = ({ atom }) => {
    const setAtom = useUpdateAtom(atom)
    const setIsSearchEnabled = useUpdateAtom(isSearchEnabled)

    const onChange = useCallback((e) => {
        setIsSearchEnabled(false)
        setAtom(e.target.value)
    }, [setAtom, setIsSearchEnabled])

    return {onChange}
}

export default useSearchInput

That removes the need for the extra atom and searching is then just:

const search = useCallback(() => {
    setEnabledSearch(true)
}, [setEnabledSearch])

[aulneau]

nice! you can try this, too:

import { useAtomCallback } from 'jotai/utils';
import { useCallback } from 'react';

const useSearchInput = ({ atom }) =>
  useAtomCallback<void, React.ChangeEvent<HTMLInputElement>>(
    useCallback((get, set, e) => {
      set(isSearchEnabled, false);
      set(atom, e.currentTarget.value);
    }, [atom])
  );