Feature request: Lazy fetcher ?

Imagine a Cascader component, which has two Select components, in which the second one depends on the selected item from the first component.

In this case, could useSWR supports lazy fetcher by returning a refetch function which can be run later ?

const { data, error, refetch } = useSWR(key, { lazy: true })

[ismay]

You can use mutate in that case right?

const { data } = useSWR('select-data')

return <>
  {data}
  <button onClick={() => {
    mutate('select-data', fetch('/api'))
  }}>lazy fetch</button>
</>

In fact, mutate is so flexible that can be used in both prefetching and lazy fetching.

To me this does not really resolve the issue. I know that technically this addresses the feature request, but it doesn’t seem like an officially supported solution to me. All I see in the docs for mutate is references to mutating data (which makes sense), not lazy fetching.

The fact that it can be used for lazy fetching seems more like an implementation detail to me than an offically supported part of the API. I’d be hesistant to use this in production as I wouldn’t feel comfortable relying on this not breaking in a patch/minor bump.

Could we reopen, and ideally implement a lazy flag? Would that be in scope for this lib?

[good-idea]

EDIT: see my gist below with a better solution

I agree that a lazy option would be nice, but for now, here is my solution for a useLazyRequest hook:

const request = async () => {
  // whatever your request function is
};

type LazyRequestTuple<R, V extends Variables = Variables> = [
  (v: V) => Promise<void>,
  ResponseInterface<R | null, Error>
];

export const useLazyRequest = <R, V extends Variables = Variables>(
  query: DocumentNode
): LazyRequestTuple<R, V> => {
  const response = useSWR<R | null>(print(query), () => {
    return null;
  });

  const executeQuery = async (variables?: V) => {
    const result = await request<R>(query, variables);
    response.mutate(result, false);
  };

  return [executeQuery, response];
};