Using react hooks inside selector (useHistory)

Hi,

We use an atom and a selector for providing a custom fetchWithAuth which automatically sends an authentication token for every request:

export const authTokenState = atom({
  key: 'authTokenState',
  default: '',
});

const fetchWithCredentials = async (
  input: RequestInfo,
  init?: RequestInit,
  token?: string,
) => {
  const response = await fetch(input, {
    method: 'GET',
    credentials: 'include',
    ...init,
    headers: {
      pragma: 'no-cache',
      'cache-control': 'no-cache',
      Accept: 'application/json, text/plain, */*',
      ...(token ? { Authorization: token } : null),
      ...(init ? init.headers : null),
    },
  });

  const { status } = response;
  // history previously from useHistory
  //if (status === 401) history.replace(loginUrl);
  return response;
};

export const fetchWithAuth = selector({
  key: 'fetchWithAuthState',
  get: ({ get }) => {
    const authToken = get(authTokenState);
    return (input: RequestInfo, init?: RequestInit) =>
      fetchWithCredentials(input, init, authToken);
  },
});

Previously, the fetchWithAuth has been provided by a custom hook, which used the useHistory hook to add the redirect in case of a 401.

I could add the history as a parameter and could use selectorFamily instead but then every consumer would have to provide the history every time it wants to use the custom fetchWithAuth function.

Now my question is: How can I access the history inside the selector properly?

Maybe I’m using it all in the completely wrong way, I’m at the beginning of digging into Recoil. Therefore, any suggestions are welcome.

[eLeontev]

casting could help:

const historyState = atom({ key: 'history', default: null as unknown as History})
// or
const historyState = atom<History>({ key: 'history', default: null as any})

[tklepzig]

I learned that RecoilRoot can be used with an initial state, so I tried the following:

	const historyState = atom({ key: 'history', default: null });
	
	const App = () => {
	  	const history = useHistory();
	
	  	return <RecoilRoot initializeState={({ set }) => { set(historyState, history); }}>
	  		...
		</RecoilRoot>
	}

It seems to work, on the very first render the history is already set. Are there any possible drawbacks using this approach?