Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Remove usage of useCache and ADR #1424

Merged
merged 4 commits into from
Feb 12, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .env
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
NODE_ENV='production'
USE_API_CACHE=true
1 change: 0 additions & 1 deletion .env.development
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ IS_MAINTENANCE_ALERT_ENABLED=''
MAINTENANCE_ALERT_MESSAGE=''
MAINTENANCE_ALERT_START_TIMESTAMP=''
MAINTENANCE_ALERT_END_TIMESTAMP=''
USE_API_CACHE='true'
SUBSCRIPTION_LPR='true'
PLOTLY_SERVER_URL='http://localhost:8050'
AUTH0_SELF_SERVICE_INTEGRATION='true'
Expand Down
45 changes: 45 additions & 0 deletions docs/decisions/0009-useCache_deprecation.rst
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
9. Deprecation of `useCache` option
===================================

Status
******

Accepted

Context
*******

Frontend platform offers a variety of helpers to facilitate API calls to our backend services. Part of their suite of
helper functions are `getAuthenticatedHttpClient` which allows a `useCache` option. The inclusion of the `useCache` option
treats the original `getAuthenticatedHttpClient` as a
`cachedAuthenticatedHttpClient` `method <https://github.com/openedx/frontend-platform/blob/15ef507e41127b4fd4ace5d31f7e527381678572/src/auth/AxiosJwtAuthService.js#L111-L117>`_.
This has the effect of modifying the headers of the API request to our backend service. Within the the
`Access-Control-Request-Headers` preflight request or OPTIONS call, the inclusion of `useCache` resulted in the
`Cache-Control` header also being sent resulting in an unresolved API response and breaking usability for certain
components that depended on the upstream data.

Decision
********

Deprecate the usage of `useCache` within `getAuthenticatedHttpClient` to avoid inadvertently modifying the expected
request headers to our backend services. For instances where client side caching of API calls is necessary, use
`React Query <https://tanstack.com/query/v4/docs/framework/react/overview>`_ when constructing the API call. There are
several examples that currently reside in our enterprise MFEs that
`effectively leverage <https://github.com/openedx/frontend-app-learner-portal-enterprise/blob/master/src/components/app/data/hooks/useBFF.js>`_ React Query, and the
usage of `query keys <https://github.com/openedx/frontend-app-learner-portal-enterprise/blob/master/src/components/app/data/queries/queryKeyFactory.js>`_ and
`helpers <https://github.com/openedx/frontend-app-learner-portal-enterprise/tree/master/src/components/app/data/queries>`_.


Consequences
************

This will in the intermediary remove any client side caching facilitated by the `useCache` option. But should intentionally
be updated with a React Query implementation to maintain the benefits of client side caching. In the meantime, the backend
services cache will suffice

Alternatives Considered
***********************
The underlying package, `frontend-platform`, which depended on the breaking package upgrade, `Axios`, was downgraded as part of resolving
issues related to the `useCache` field. It was determined that the `useCache` field was primarily used in enterprise, so
it made the most sense to remove the `useCache` field in favor of introducing tools like `React Query` for client side
caching.
Loading