chore: added environment.configName to getRequestCacheKey

facebook · Feb 28, 2024 · 97248ab · 97248ab
1 parent 054e65c
commit 97248ab
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 9 deletions.
diff --git a/packages/react-relay/ReactRelayQueryRenderer.js b/packages/react-relay/ReactRelayQueryRenderer.js
@@ -116,7 +116,11 @@ class ReactRelayQueryRenderer extends React.Component<Props, State> {
       const {query} = props;
 
       const request = getRequest(query);
-      requestCacheKey = getRequestCacheKey(request.params, props.variables);
+      requestCacheKey = getRequestCacheKey(
+        request.params,
+        props.variables,
+        props.environment?.configName,
+      );
       queryFetcher = requestCache[requestCacheKey]
         ? requestCache[requestCacheKey].queryFetcher
         : new ReactRelayQueryFetcher();
@@ -329,9 +333,11 @@ function getRenderProps(
 function getRequestCacheKey(
   request: RequestParameters,
   variables: Variables,
+  configName: ?string,
 ): string {
   return JSON.stringify({
     id: request.cacheID ? request.cacheID : request.id,
+    configName: configName || null,
     variables,
   });
 }
@@ -349,7 +355,11 @@ function resetQueryStateForUpdate(
   let queryFetcher;
   if (query) {
     const request = getRequest(query);
-    const requestCacheKey = getRequestCacheKey(request.params, props.variables);
+    const requestCacheKey = getRequestCacheKey(
+      request.params,
+      props.variables,
+      props.environment?.configName,
+    );
     queryFetcher = requestCache[requestCacheKey]
       ? requestCache[requestCacheKey].queryFetcher
       : new ReactRelayQueryFetcher(prevSelectionReferences);
@@ -436,7 +446,12 @@ function fetchQueryAndComputeStateFromProps(
 
       // cache the request to avoid duplicate requests
       requestCacheKey =
-        requestCacheKey || getRequestCacheKey(request.params, props.variables);
+        requestCacheKey ||
+        getRequestCacheKey(
+          request.params,
+          props.variables,
+          props.environment?.configName,
+        );
       requestCache[requestCacheKey] = {queryFetcher, snapshot};
 
       if (!snapshot) {

diff --git a/packages/react-relay/__tests__/ReactRelayQueryRenderer-test.js b/packages/react-relay/__tests__/ReactRelayQueryRenderer-test.js
@@ -1210,6 +1210,70 @@ describe('ReactRelayQueryRenderer', () => {
     });
   });
 
+  describe('when two constructors fire with different environments', () => {
+    it('fetches the first query only, when `configName`s are the same', () => {
+      const environmentA = createMockEnvironment();
+      const environmentB = createMockEnvironment();
+      class Example extends React.Component {
+        render() {
+          return (
+            <React.Fragment>
+              <ReactRelayQueryRenderer
+                query={TestQuery}
+                cacheConfig={cacheConfig}
+                environment={environmentA}
+                render={render}
+                variables={variables}
+              />
+              <ReactRelayQueryRenderer
+                query={TestQuery}
+                cacheConfig={cacheConfig}
+                environment={environmentB}
+                render={render}
+                variables={variables}
+              />
+            </React.Fragment>
+          );
+        }
+      }
+      ReactTestRenderer.create(<Example />);
+      expect.assertions(2);
+      expect(environmentA.execute).toBeCalledTimes(1);
+      expect(environmentB.execute).toBeCalledTimes(0);
+    });
+
+    it('fetches both queries, when `configName`s are different', () => {
+      const environmentA = createMockEnvironment({configName: 'A'});
+      const environmentB = createMockEnvironment({configName: 'B'});
+      class Example extends React.Component {
+        render() {
+          return (
+            <React.Fragment>
+              <ReactRelayQueryRenderer
+                query={TestQuery}
+                cacheConfig={cacheConfig}
+                environment={environmentA}
+                render={render}
+                variables={variables}
+              />
+              <ReactRelayQueryRenderer
+                query={TestQuery}
+                cacheConfig={cacheConfig}
+                environment={environmentB}
+                render={render}
+                variables={variables}
+              />
+            </React.Fragment>
+          );
+        }
+      }
+      ReactTestRenderer.create(<Example />);
+      expect.assertions(2);
+      expect(environmentA.execute).toBeCalledTimes(1);
+      expect(environmentB.execute).toBeCalledTimes(1);
+    });
+  });
+
   describe('when the fetch succeeds', () => {
     beforeEach(() => {
       ReactTestRenderer.create(

diff --git a/packages/relay-runtime/multi-actor-environment/MultiActorEnvironmentTypes.js b/packages/relay-runtime/multi-actor-environment/MultiActorEnvironmentTypes.js
@@ -57,12 +57,6 @@ export interface IActorEnvironment extends IEnvironment {
    * TODO: this needs to move the the MultiActorEnvironment with different API.
    */
   getPublishQueue(): RelayPublishQueue;
-
-  /**
-   * Optional. A human-readable identifier of the environment.
-   * This value should be visible in the dev tools.
-   */
-  +configName: ?string;
 }
 
 /**

diff --git a/packages/relay-runtime/store/RelayStoreTypes.js b/packages/relay-runtime/store/RelayStoreTypes.js
@@ -958,6 +958,12 @@ export interface IEnvironment {
    * with `@required(action: LOG)`.
    */
   relayFieldLogger: RelayFieldLogger;
+
+  /**
+   * Optional. A human-readable identifier of the environment.
+   * This value should be visible in the dev tools.
+   */
+  +configName: ?string;
 }
 
 /**