cube-js/cube

Duplicate requests aren't caught with useCubeQuery when making POST requests

Open

#3,473 opened on Sep 21, 2021

View on GitHub
 (1 comment) (2 reactions) (1 assignee)Rust (19,563 stars) (1,965 forks)batch import
client:reactgood first issuehelp wanted

Description

Describe the bug With the useCubeQuery hook, there exists a function useDeepCompareMemoize which compares the queries to determine if the useEffect within the hook to make a request is trigged.

This works well to avoid unnecessary GET requests on component re-renders where the query doesn't change.

However, for POST requests, the following condition always evaluates to false because the reference to the cubejsApi object is modified to apply the 'Content-Type': 'application/json' header.

In hook useDeepCompareMemoize within deep-compare-memoize.js

  if (!equals(value, ref.current)) {
    ref.current = value;
  }

So when a new query comparison is made, value won't have the 'Content-Type': 'application/json' while ref.current will.

To Reproduce Steps to reproduce the behavior:

  1. Create a cube backend
  2. Create a frontend component utilizing useCubeQuery
  3. Trigger a POST request by make a request with a URL with length > 2000
  4. Re-render the component without modifying the query passed to useCubeQuery
  5. Notice that a new request is made even though the query hasn't changed

Expected behavior As with GET requests, duplicate requests are ignored after comparison in useDeepCompareMemoize. Since cubejs internally handles swapping to POST requests, it should handle duplicate requests like it does with GET requests

Screenshots When comparing two exact equivalent queries:

Note:ref.current is set to value but even on subsequent re-renders the ref will have been modified to include the 'Content-Type': 'application/json' header.

Version: "@cubejs-client/core": "0.28.25", "@cubejs-client/react": "0.28.25",

Additional context Current workaround is to simply add the Content-Type header in the cubejsApi instantiation

   headers: {
      'Content-Type': 'application/json',
   }

Contributor guide