When does useSWR not call the fetcher?

[vaibhav6496]

I am new to using useSWR. Below is one condition I found in which useSWR doesn't even attempt to make the API call:

// Below is a snippet of component that one of my pages on NextJS renders
const { data: componentData, isValidating, error } = useSWR(url, fetcher.fetch, {
    refreshInterval: 0,
    revalidateOnFocus: false,
  });

  return (
    <>
      {!isValidating ? (
        <>
          <SomeReactComponent
            {...componentData}
            specificProp={componentData.specificProp} // THIS IS THE LINE CAUSING PROBLEM
            onRefresh={handleRefresh}
          />
        </>
      ) : (
        <SomeReactComponent loading /> // Renders the loading version of the Component
      )}
    </>
  );

If I comment out the line specificProp={componentData.specificProp} and pass that prop as spreading operator in {...componentData}, it works well. But if I don't do it, it doesn't even call the API and the component doesn't render altogether.

[sergiodxa]

Could you provide a CodeSandbox to replicate it? It's hard to see if there may be something else causing, at a first glance it should work.

[vaibhav6496]

I actually solved it. I just had to add && componentData in condition for rendering <SomeReactComponent>, so the code now looks like this:

 <>
      {!isValidating && componentData ? (
        <>
          <SomeReactComponent
            {...componentData}
            specificProp={componentData.specificProp} // THIS IS THE LINE CAUSING PROBLEM
            onRefresh={handleRefresh}
          />
        </>
      ) : (
        <SomeReactComponent loading /> // Renders the loading version of the Component
      )}
</>

The reason it happened as per my understanding was because when useSWR is first initialised it returns isValidating: false to UI before making the API call. This ended up rendering SomeReactComponent with componentData as undefined causing the error Can't read property specificProp of undefined, therefore breaking the UI and the API call not taking place.

@sergiodxa Please let me know if I am right assuming that when useSWR is first initialised it returns isValidating: false to the UI?

[sergiodxa]

Yes, that’s correct