relay-runtime 11.0.0 → 13.0.0-rc.0

package/mutations/commitMutation.js.flow

@@ -12,23 +12,11 @@
 
 'use strict';
 
-const RelayDeclarativeMutationConfig = require('./RelayDeclarativeMutationConfig');
-
-const invariant = require('invariant');
-const isRelayModernEnvironment = require('../store/isRelayModernEnvironment');
-const validateMutation = require('./validateMutation');
-const warning = require('warning');
-
-const {getRequest} = require('../query/GraphQLTag');
-const {generateUniqueClientID} = require('../store/ClientID');
-const {
-  createOperationDescriptor,
-} = require('../store/RelayModernOperationDescriptor');
-
 import type {PayloadError, UploadableMap} from '../network/RelayNetworkTypes';
 import type {GraphQLTaggedNode} from '../query/GraphQLTag';
 import type {
   IEnvironment,
+  MutationParameters,
   SelectorStoreUpdater,
 } from '../store/RelayStoreTypes';
 import type {
@@ -38,57 +26,63 @@ import type {
 } from '../util/RelayRuntimeTypes';
 import type {DeclarativeMutationConfig} from './RelayDeclarativeMutationConfig';
 
-export type DEPRECATED_MutationConfig<T> = {|
+const {getRequest} = require('../query/GraphQLTag');
+const {generateUniqueClientID} = require('../store/ClientID');
+const isRelayModernEnvironment = require('../store/isRelayModernEnvironment');
+const {
+  createOperationDescriptor,
+} = require('../store/RelayModernOperationDescriptor');
+const RelayDeclarativeMutationConfig = require('./RelayDeclarativeMutationConfig');
+const validateMutation = require('./validateMutation');
+const invariant = require('invariant');
+const warning = require('warning');
+
+export type DEPRECATED_MutationConfig<TMutationResponse> = {|
   configs?: Array<DeclarativeMutationConfig>,
   cacheConfig?: CacheConfig,
   mutation: GraphQLTaggedNode,
   variables: Variables,
   uploadables?: UploadableMap,
-  onCompleted?: ?(response: T, errors: ?Array<PayloadError>) => void,
+  onCompleted?: ?(
+    response: TMutationResponse,
+    errors: ?Array<PayloadError>,
+  ) => void,
   onError?: ?(error: Error) => void,
   onUnsubscribe?: ?() => void,
-  optimisticUpdater?: ?SelectorStoreUpdater,
+  optimisticUpdater?: ?SelectorStoreUpdater<TMutationResponse>,
   optimisticResponse?: Object,
-  updater?: ?SelectorStoreUpdater,
+  updater?: ?SelectorStoreUpdater<TMutationResponse>,
 |};
 
-export type MutationParameters = {|
-  +response: {...},
-  +variables: {...},
-  +rawResponse?: {...},
-|};
-
-export type MutationConfig<T: MutationParameters> = {|
+export type MutationConfig<TMutation: MutationParameters> = {|
   configs?: Array<DeclarativeMutationConfig>,
   cacheConfig?: CacheConfig,
   mutation: GraphQLTaggedNode,
   onError?: ?(error: Error) => void,
   onCompleted?: ?(
-    response: $ElementType<T, 'response'>,
+    response: TMutation['response'],
     errors: ?Array<PayloadError>,
   ) => void,
+  onNext?: ?() => void,
   onUnsubscribe?: ?() => void,
-  optimisticResponse?: $ElementType<
-    {
-      +rawResponse?: {...},
-      ...T,
-      ...
-    },
-    'rawResponse',
-  >,
-  optimisticUpdater?: ?SelectorStoreUpdater,
-  updater?: ?SelectorStoreUpdater,
+  optimisticResponse?: {
+    +rawResponse?: {...},
+    ...TMutation,
+    ...
+  }['rawResponse'],
+  optimisticUpdater?: ?SelectorStoreUpdater<TMutation['response']>,
+  updater?: ?SelectorStoreUpdater<TMutation['response']>,
   uploadables?: UploadableMap,
-  variables: $ElementType<T, 'variables'>,
+  variables: TMutation['variables'],
 |};
 
 /**
  * Higher-level helper function to execute a mutation against a specific
  * environment.
  */
-function commitMutation<T: MutationParameters>(
+function commitMutation<TMutation: MutationParameters>(
   environment: IEnvironment,
-  config: MutationConfig<T>,
+  config: MutationConfig<TMutation>,
 ): Disposable {
   invariant(
     isRelayModernEnvironment(environment),
@@ -103,14 +97,8 @@ function commitMutation<T: MutationParameters>(
     throw new Error('commitMutation: Expected mutation to be of type request');
   }
   let {optimisticResponse, optimisticUpdater, updater} = config;
-  const {
-    configs,
-    cacheConfig,
-    onError,
-    onUnsubscribe,
-    variables,
-    uploadables,
-  } = config;
+  const {configs, cacheConfig, onError, onUnsubscribe, variables, uploadables} =
+    config;
   const operation = createOperationDescriptor(
     mutation,
     variables,
@@ -161,6 +149,7 @@ function commitMutation<T: MutationParameters>(
             errors.push(...payload.errors);
           }
         }
+        config.onNext?.();
       },
       complete: () => {
         const {onCompleted} = config;

package/mutations/readUpdatableQuery_EXPERIMENTAL.js.flow

@@ -0,0 +1,309 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @emails oncall+relay
+ * @format
+ */
+
+// flowlint ambiguous-object-type:error
+
+'use strict';
+
+import type {GraphQLTaggedNode} from '../query/GraphQLTag';
+import type {RecordProxy, RecordSourceProxy} from '../store/RelayStoreTypes';
+import type {ReaderLinkedField, ReaderSelection} from '../util/ReaderNode';
+import type {OperationType} from '../util/RelayRuntimeTypes';
+
+const {getRequest} = require('../query/GraphQLTag');
+const {getArgumentValues} = require('../store/RelayStoreUtils');
+
+const nonUpdatableKeys = ['id', '__id', '__typename'];
+
+function readUpdatableQuery_EXPERIMENTAL<TQuery: OperationType>(
+  query: GraphQLTaggedNode,
+  variables: TQuery['variables'],
+  proxy: RecordSourceProxy,
+): TQuery['response'] {
+  // TODO assert that the concrete request is an updatable query
+  const request = getRequest(query);
+
+  const updatableProxy = {};
+  updateProxyFromSelections(
+    updatableProxy,
+    proxy.getRoot(),
+    variables,
+    request.fragment.selections,
+    proxy,
+  );
+  if (__DEV__) {
+    Object.freeze(updatableProxy);
+  }
+  return updatableProxy;
+}
+
+function updateProxyFromSelections<TQuery: OperationType>(
+  mutableUpdatableProxy: TQuery['response'],
+  recordProxy: RecordProxy,
+  queryVariables: TQuery['variables'],
+  selections: $ReadOnlyArray<ReaderSelection>,
+  root: RecordSourceProxy,
+) {
+  for (const selection of selections) {
+    switch (selection.kind) {
+      case 'LinkedField':
+        // Linked fields are assignable if they contain fragment spreads or
+        // read-only otherwise.
+        const isAssignable = selection.selections.some(
+          item => item.kind === 'FragmentSpread',
+        );
+
+        const set = !isAssignable
+          ? undefined
+          : selection.plural
+          ? createSetterForPluralLinkedField(
+              selection,
+              queryVariables,
+              recordProxy,
+              root,
+            )
+          : createSetterForSingularLinkedField(
+              selection,
+              queryVariables,
+              recordProxy,
+              root,
+            );
+
+        const get = selection.plural
+          ? createGetterForPluralLinkedField(
+              selection,
+              queryVariables,
+              recordProxy,
+              root,
+            )
+          : createGetterForSingularLinkedField(
+              selection,
+              queryVariables,
+              recordProxy,
+              root,
+            );
+
+        Object.defineProperty(
+          mutableUpdatableProxy,
+          selection.alias ?? selection.name,
+          {
+            get,
+            set,
+          },
+        );
+        break;
+      case 'ScalarField':
+        const scalarFieldName = selection.alias ?? selection.name;
+        Object.defineProperty(mutableUpdatableProxy, scalarFieldName, {
+          get: function () {
+            const variables = getArgumentValues(
+              selection.args ?? [],
+              queryVariables,
+            );
+            // Flow incorrect assumes that the return value for the get method must match
+            // the set parameter.
+            return (recordProxy.getValue(
+              selection.name,
+              // $FlowFixMe[unclear-type] No good way to type these variables
+              (variables: any),
+              // $FlowFixMe[unclear-type] Typed by the generated updatable query flow type
+            ): any);
+          },
+          set: nonUpdatableKeys.includes(selection.name)
+            ? undefined
+            : // $FlowFixMe[unclear-type] Typed by the generated updatable query flow type
+              function (newValue: ?any) {
+                const variables = getArgumentValues(
+                  selection.args ?? [],
+                  queryVariables,
+                );
+                recordProxy.setValue(
+                  newValue,
+                  selection.name,
+                  // $FlowFixMe[unclear-type] No good way to type these variables
+                  (variables: any),
+                );
+              },
+        });
+        break;
+      case 'InlineFragment':
+        if (recordProxy.getType() === selection.type) {
+          updateProxyFromSelections(
+            mutableUpdatableProxy,
+            recordProxy,
+            queryVariables,
+            selection.selections,
+            root,
+          );
+        }
+        break;
+      case 'FragmentSpread':
+        // Explicitly ignore
+        break;
+      default:
+        throw new Error(
+          'Encountered an unexpected ReaderSelection variant in RelayRecordSourceProxy. This indicates a bug in Relay.',
+        );
+    }
+  }
+}
+
+function createSetterForPluralLinkedField<TQuery: OperationType>(
+  selection: ReaderLinkedField,
+  queryVariables: TQuery['variables'],
+  recordProxy: RecordProxy,
+  root: RecordSourceProxy,
+) {
+  return function set(newValue: ?$ReadOnlyArray<{__id: string, ...}>) {
+    const variables = getArgumentValues(selection.args ?? [], queryVariables);
+    if (newValue == null) {
+      // $FlowFixMe[unclear-type] No good way to type these variables
+      recordProxy.setValue(null, selection.name, (variables: any));
+    } else {
+      const recordProxies = newValue.map(item => {
+        if (item == null) {
+          throw new Error(
+            'When assigning an array of items, none of the items should be null or undefined.',
+          );
+        }
+        const {__id} = item;
+        if (__id == null) {
+          throw new Error(
+            'The __id field must be present on each item passed to the setter. This indicates a bug in Relay.',
+          );
+        }
+        const newValueRecord = root.get(__id);
+        if (newValueRecord == null) {
+          throw new Error(
+            `Did not find item with data id ${__id} in the store.`,
+          );
+        }
+        return newValueRecord;
+      });
+      recordProxy.setLinkedRecords(
+        recordProxies,
+        selection.name,
+        // $FlowFixMe[unclear-type] No good way to type these variables
+        (variables: any),
+      );
+    }
+  };
+}
+function createSetterForSingularLinkedField<TQuery: OperationType>(
+  selection: ReaderLinkedField,
+  queryVariables: TQuery['variables'],
+  recordProxy: RecordProxy,
+  root: RecordSourceProxy,
+) {
+  return function set(newValue: ?{__id: string, ...}) {
+    const variables = getArgumentValues(selection.args ?? [], queryVariables);
+    if (newValue == null) {
+      // $FlowFixMe[unclear-type] No good way to type these variables
+      recordProxy.setValue(null, selection.name, (variables: any));
+    } else {
+      const {__id} = newValue;
+      if (__id == null) {
+        throw new Error(
+          'The __id field must be present on the argument. This indicates a bug in Relay.',
+        );
+      }
+      const newValueRecord = root.get(__id);
+      if (newValueRecord == null) {
+        throw new Error(`Did not find item with data id ${__id} in the store.`);
+      }
+      recordProxy.setLinkedRecord(
+        newValueRecord,
+        selection.name,
+        // $FlowFixMe[unclear-type] No good way to type these variables
+        (variables: any),
+      );
+    }
+  };
+}
+
+function createGetterForPluralLinkedField<TQuery: OperationType>(
+  selection: ReaderLinkedField,
+  queryVariables: TQuery['variables'],
+  recordProxy: RecordProxy,
+  root: RecordSourceProxy,
+) {
+  return function () {
+    const variables = getArgumentValues(selection.args ?? [], queryVariables);
+    const linkedRecords = recordProxy.getLinkedRecords(
+      selection.name,
+      // $FlowFixMe[unclear-type] No good way to type these variables
+      (variables: any),
+    );
+    if (linkedRecords != null) {
+      return (linkedRecords.map(linkedRecord => {
+        if (linkedRecord != null) {
+          const updatableProxy = {};
+          updateProxyFromSelections(
+            updatableProxy,
+            linkedRecord,
+            queryVariables,
+            selection.selections,
+            root,
+          );
+          if (__DEV__) {
+            Object.freeze(updatableProxy);
+          }
+          // Flow incorrect assumes that the return value for the get method must match
+          // the set parameter.
+          // $FlowFixMe[unclear-type] Typed by the generated updatable query flow type
+          return (updatableProxy: any);
+        } else {
+          return linkedRecord;
+        }
+        // $FlowFixMe[unclear-type] Typed by the generated updatable query flow type
+      }): any);
+    } else {
+      return linkedRecords;
+    }
+  };
+}
+
+function createGetterForSingularLinkedField<TQuery: OperationType>(
+  selection: ReaderLinkedField,
+  queryVariables: TQuery['variables'],
+  recordProxy: RecordProxy,
+  root: RecordSourceProxy,
+) {
+  return function () {
+    const variables = getArgumentValues(selection.args ?? [], queryVariables);
+    const linkedRecord = recordProxy.getLinkedRecord(
+      selection.name,
+      // $FlowFixMe[unclear-type] No good way to type these variables
+      (variables: any),
+    );
+    if (linkedRecord != null) {
+      const updatableProxy = {};
+      updateProxyFromSelections(
+        updatableProxy,
+        linkedRecord,
+        queryVariables,
+        selection.selections,
+        root,
+      );
+      if (__DEV__) {
+        Object.freeze(updatableProxy);
+      }
+      // Flow incorrect assumes that the return value for the get method must match
+      // the set parameter.
+      // $FlowFixMe[unclear-type] Typed by the generated updatable query flow type
+      return (updatableProxy: any);
+    } else {
+      return linkedRecord;
+    }
+  };
+}
+
+module.exports = {readUpdatableQuery_EXPERIMENTAL};

package/mutations/validateMutation.js.flow

@@ -13,28 +13,17 @@
 'use strict';
 
 import type {
-  NormalizationSelection,
   NormalizationField,
+  NormalizationSelection,
 } from '../util/NormalizationNode';
 import type {ConcreteRequest} from '../util/RelayConcreteNode';
 import type {Variables} from '../util/RelayRuntimeTypes';
 
-type ValidationContext = {|
-  visitedPaths: Set<string>,
-  path: string,
-  variables: Variables,
-  missingDiff: Object,
-  extraDiff: Object,
-  moduleImportPaths: Set<string>,
-|};
-
-const warning = require('warning');
-
-const hasOwnProperty = Object.prototype.hasOwnProperty;
-
 const {
-  CONDITION,
+  ACTOR_CHANGE,
+  CLIENT_COMPONENT,
   CLIENT_EXTENSION,
+  CONDITION,
   DEFER,
   FLIGHT_FIELD,
   FRAGMENT_SPREAD,
@@ -47,10 +36,26 @@ const {
   STREAM,
   TYPE_DISCRIMINATOR,
 } = require('../util/RelayConcreteNode');
+const warning = require('warning');
+
+type ValidationContext = {|
+  visitedPaths: Set<string>,
+  path: string,
+  variables: Variables,
+  missingDiff: Object,
+  extraDiff: Object,
+  moduleImportPaths: Set<string>,
+|};
+// $FlowFixMe[method-unbinding] added when improving typing for this parameters
+const hasOwnProperty = Object.prototype.hasOwnProperty;
 
 let validateMutation = () => {};
 if (__DEV__) {
-  const addFieldToDiff = (path: string, diff: Object, isScalar) => {
+  const addFieldToDiff = (
+    path: string,
+    diff: Object,
+    isScalar: void | boolean,
+  ) => {
     let deepLoc = diff;
     path.split('.').forEach((key, index, arr) => {
       if (deepLoc[key] == null) {
@@ -115,6 +120,7 @@ if (__DEV__) {
       case CONDITION:
         validateSelections(optimisticResponse, selection.selections, context);
         return;
+      case CLIENT_COMPONENT:
       case FRAGMENT_SPREAD:
         validateSelections(
           optimisticResponse,
@@ -126,6 +132,12 @@ if (__DEV__) {
       case LINKED_FIELD:
       case FLIGHT_FIELD:
         return validateField(optimisticResponse, selection, context);
+      case ACTOR_CHANGE:
+        return validateField(
+          optimisticResponse,
+          selection.linkedField,
+          context,
+        );
       case INLINE_FRAGMENT:
         const type = selection.type;
         const isConcreteType = selection.abstractKey == null;

package/network/ConvertToExecuteFunction.js.flow

@@ -12,10 +12,10 @@
 
 'use strict';
 
-const RelayObservable = require('./RelayObservable');
-
 import type {ExecuteFunction, FetchFunction} from './RelayNetworkTypes';
 
+const RelayObservable = require('./RelayObservable');
+
 /**
  * Converts a FetchFunction into an ExecuteFunction for use by RelayNetwork.
  */

package/network/RelayNetwork.js.flow

@@ -12,22 +12,21 @@
 
 'use strict';
 
-const invariant = require('invariant');
-
-const {convertFetch} = require('./ConvertToExecuteFunction');
-
 import type {RequestParameters} from '../util/RelayConcreteNode';
 import type {CacheConfig, Variables} from '../util/RelayRuntimeTypes';
 import type {
   FetchFunction,
   GraphQLResponse,
-  LogRequestInfoFunction,
   INetwork,
+  LogRequestInfoFunction,
   SubscribeFunction,
   UploadableMap,
 } from './RelayNetworkTypes';
 import type RelayObservable from './RelayObservable';
 
+const {convertFetch} = require('./ConvertToExecuteFunction');
+const invariant = require('invariant');
+
 /**
  * Creates an implementation of the `Network` interface defined in
  * `RelayNetworkTypes` given `fetch` and `subscribe` functions.

package/network/RelayNetworkTypes.js.flow

@@ -20,14 +20,15 @@ import type RelayObservable, {ObservableFromValue} from './RelayObservable';
  * An interface for fetching the data for one or more (possibly interdependent)
  * queries.
  */
-export type INetwork = {|
-  execute: ExecuteFunction,
-|};
+export interface INetwork {
+  +execute: ExecuteFunction;
+}
+
 export type LogRequestInfoFunction = mixed => void;
 
-export type PayloadData = {[key: string]: mixed, ...};
+export type PayloadData = interface {[key: string]: mixed};
 
-export type PayloadError = {
+export type PayloadError = interface {
   message: string,
   locations?: Array<{
     line: number,
@@ -36,14 +37,13 @@ export type PayloadError = {
   }>,
   // Not officially part of the spec, but used at Facebook
   severity?: 'CRITICAL' | 'ERROR' | 'WARNING',
-  ...
 };
 
 export type PayloadExtensions = {[key: string]: mixed, ...};
 
 /**
  * The shape of a GraphQL response as dictated by the
- * [spec](https://graphql.github.io/graphql-spec/June2018/#sec-Response-Format)
+ * [spec](https://spec.graphql.org/June2018/#sec-Response-Format).
  */
 export type GraphQLResponseWithData = {|
   +data: PayloadData,
@@ -120,7 +120,7 @@ export type SubscribeFunction = (
 ) => RelayObservable<GraphQLResponse>;
 
 export type Uploadable = File | Blob;
-export type UploadableMap = {[key: string]: Uploadable, ...};
+export type UploadableMap = interface {[key: string]: Uploadable};
 
 /**
  * React Flight tree created on the server.
@@ -132,6 +132,13 @@ export type ReactFlightPayloadQuery = {|
   +response: GraphQLSingularResponse,
   +variables: Variables,
 |};
+export type ReactFlightPayloadFragment = {|
+  +__id: string,
+  +__typename: string,
+  +module: mixed,
+  +response: GraphQLSingularResponse,
+  +variables: Variables,
+|};
 export type ReactFlightServerError = {
   +message: string,
   +stack: string,
@@ -147,10 +154,12 @@ export type ReactFlightServerError = {
  * - queries: an array of queries that the server preloaded for the client.
  * - errors: an array of errors that were encountered while rendering the
  *           Server Component.
+ * - fragments: an array of fragments that the server preloaded for the client.
  */
 export type ReactFlightPayloadData = {|
   +status: string,
   +tree: ?Array<ReactFlightServerTree>,
   +queries: Array<ReactFlightPayloadQuery>,
   +errors: Array<ReactFlightServerError>,
+  +fragments: Array<ReactFlightPayloadFragment>,
 |};

package/network/RelayObservable.js.flow

@@ -223,7 +223,7 @@ class RelayObservable<+T> implements Subscribable<T> {
   do(observer: Observer<T>): RelayObservable<T> {
     return RelayObservable.create(sink => {
       const both = (action: any) =>
-        function() {
+        function () {
           try {
             observer[action] && observer[action].apply(observer, arguments);
           } catch (error) {