Delayed intial fetching?

[caub]

I'd like to do something like

const { isLoading, data, initialFetch /* doesn't exist */ } = useQuery('stuff', () => fetchStuff());

// further down
    <button onClick={() => { initialFetch(); /*...*/ }}>Open modal<.button>

Basically the data would not be fetched until we call intialFetch

Is this possible?

I believe a workaround is to do

const [open, setOpen] = useState(false);
const { isLoading, data, initialFetch } = useQuery('stuff-'+open, () => open && fetchStuff());

// further down
    <button onClick={() => { setOpen(true); /*...*/ }}>Open modal<.button>

but not ideal maybe

[TkDodo]

This is how I would do it: https://twitter.com/tkdodo/status/1374452337046032395

[caub]

Thanks, didn't know about the enabled option

so it could look like

const [{ isLoading, data}, initialFetch] = useLazyQuery('stuff', () => fetchStuff());

but I think I'll use enabled directly as I've already some state for it

Thanks again

[TkDodo]

Exactly 👍