SWRConfig with conditional fetcher function

[hwangyena]

I want to use fetcher function by using SWRConfig, except for specific key value.
For Instance, if the key containing 'local' key use fetcher1 function, and others use fetcher2 function.
But with that code, when using mutate, the value initially changes to the expected value, but then immediately to an undefined value.
I guess that reason is refetching function in SWRConfig.. (cuz if I remove that code, it works well)

I already know multiple use <SWRConfig />. but, I want to divide by key value.. not by component

This is my code.

  return (
    <SWRConfig value={{ fetcher: (key) => (key.includes('test') ? fetcherTest : fetcherNormal) }}>
      <Component />;
    </SWRConfig>
  );

and use mutate in component, it's not working.

const Component = () => {
  const { data, mutate } = useSWR<string>('/test', null);

  return (
      ...
      <h1>{data}</h1>
      <button onClick={()=>mutate('1')}>change 1</button>
      <button onClick={() => mutate('2')}>change 2</button>
      ...
  );
};

How can I fix this problem?

[shuding]

It seems that you didn't call the inner fetcher functions. This should work:

  return (
    <SWRConfig value={{ fetcher: (key) => (key.includes('test') ? fetcherTest(key) : fetcherNormal(key)) }}>
      <Component />;
    </SWRConfig>
  );