Multiple Request being sent

[LuisValgoi]

Reporter bug

https://github.com/tannerlinsley/react-query/issues/935

Branch

29

Screenshot

[marceloschreiber]

Cause

The first call is made by RouteValidator:

<RouteValidator
  allowedAuthorities={['canAccessTodoListPage']}
  authorityKey='permissions'
  path={BrowserURL.TODO_LIST}
  component={TodoList} />

Second one is made by TodoList:

<ComponentValidator
  allowedAuthorities={['canAccessDropApplication']}
  authorityKey='permissions'>
  <CenteredLink text='Drop Application (this is a restricted text and you should not see unless you have access)' /> 
 </ComponentValidator>

Solution

Since permissions are something that does not change often I don't think it's a good idea to call the backend every time that the frontend needs to perform this check.

The simplest solution to achieve this would be to use the react-query cache, this can be done by setting the staleTime property of the useQuery hook. Refer to the documentation

useRequest.js:

///...
const FIVE_MINUTES_IN_MILLISECONDS = 1000 * 60 * 5;

function useOperation(reactQueryKey, operation, urlKey, dataParam, config) {
  const { data, status } = useQuery(reactQueryKey, async () => {
    const url = UrlProvider.getUrl(urlKey);
    const res = await Request[operation](url, dataParam, config);
    return res.data;
  }, {
    staleTime: FIVE_MINUTES_IN_MILLISECONDS
  });

  return { data, status };
/// ....
}

This way the next calls withing the 5 minutes mark are going to be retrieved from the cache.

[LuisValgoi]

Awesome @marceloschreiber Really thanks for that!