Support plugins/middlewares

[scucchiero]

I noticed most times I use SWR I need to wrap it to match the project needs or current stack.

Some projects use HTTP status codes to describe the errors in the application layer, which would automatically throw when using axios for example, but others would return 2XX codes but describe the errors within the response payload.
Others may even the combination of the above.

That would require doing things like the following.

// this project uses its own http library
import hit from './hit'

// here you can reconciliate the fetching logic with useSWR
const fetcher = (url, action) => hit({ url, action })
  .then((res) => {
    if (res.error) throw new Error(res.error);
    return res;
  });

// wrapper of swr to enhance functionality
export const useResource = ({ url, action }, middleware, options) => {
  const key = [url, action];
  const { data: virginData, error, mutate } = useSWR(key, fetcher, options);
  const [data, setData] = useState(null);

  useEffect(() => {
    if (middleware && !error && virginData) {
      setData(middleware(virginData));
    } else setData(virginData);
  }, [virginData]);

  return {
    data, error, loading: !data && !error, mutate
  };
};

So I was thinking perhaps it is cleaner to support middlewares or observer logic with RxJs within SWR , thus enabling the following:

For global config.

....
<SWRConfig
  value={{
     middlewares: [
          ({ data, error, mutate }) => {
            if(data.error) throw new Error("TEST_ERROR"); 
          },
          ({ data, error, mutate }) => {
            //error would have TEST_ERROR
            mutate({ data2: "2" })
          },
          ({ data, error, mutate }) => {
             // data.data2 would have value "2" 
          }
      ]
   }}
>
  <App/>
</SWRConfig>

Then If you wanted to append more

useSWR(key, fetcher, {
     middlewares: [
       // another middleware here
     ]
  })

[huozhi]

@scucchiero thanks for providing your use case, we've had a ongoing RFC about plugins/middleware design, feel free to add any thoughts or releated feature requests there.

for the usage you give above, do you feel the below approach could work?

const {data, error} = useSWR()
const processedData = useMemo(() => {
  return middleware(data) // or you can use any other ways to apply your middlewares
}, [data])

[scucchiero]

I completely missed that thread. My bad! I will follow up there.

Yes that'd work for some cases although I found easier to wrap it as shown.

Thanks for replying!

[shuding]

Now #1160 has been merged, feel free to share you feedback!

[pke]

@scucchiero could you wire up the middleware to your needs and might you share some insights of your solution here?