What options are picked when I use multiple nested SWRConfig?

Viewed 147

I am currently using SWRConfig for having a global fetcher, but I also want to overwrite this fetcher in some components, would the upper level SWRConfig options be used?

<SWRConfig
    value={{
      fetcher: (resource, init) =>
        fetch(resource, init).then((res) => res.json()),
    }}
  >
       ...
         <SWRConfig
             value={{
               fetcher: customFetch
            }}
          >
1 Answers

Nested SWRConfig configurations will be extended. For your scenario, it means if you call useSWR inside the second SWRConfig it will use the fetcher defined there (customFetch).

Alternatively, you can also define the fetcher on the useSWR call directly to override the global one at any point.

useSWR('my-key', customFetch)
Related