react-relay 20.1.1 → 21.0.0

package/lib/relay-hooks/usePreloadedQuery.js

@@ -13,64 +13,69 @@ var _require2 = require('relay-runtime'),
 var warning = require("fbjs/lib/warning");
 function usePreloadedQuery(gqlQuery, preloadedQuery, options) {
   var environment = useRelayEnvironment();
-  var fetchKey = preloadedQuery.fetchKey,
-    fetchPolicy = preloadedQuery.fetchPolicy,
-    source = preloadedQuery.source,
-    variables = preloadedQuery.variables,
-    networkCacheConfig = preloadedQuery.networkCacheConfig;
-  var operation = useMemoOperationDescriptor(gqlQuery, variables, networkCacheConfig);
+  var operation = useMemoOperationDescriptor(gqlQuery, preloadedQuery != null ? preloadedQuery.variables : {}, preloadedQuery != null ? preloadedQuery.networkCacheConfig : undefined);
   var useLazyLoadQueryNodeParams;
-  if (preloadedQuery.kind === 'PreloadedQuery_DEPRECATED') {
-    !(operation.request.node.params.name === preloadedQuery.name) ? process.env.NODE_ENV !== "production" ? invariant(false, 'usePreloadedQuery(): Expected data to be prefetched for query `%s`, ' + 'got prefetch results for query `%s`.', operation.request.node.params.name, preloadedQuery.name) : invariant(false) : void 0;
-    useLazyLoadQueryNodeParams = {
-      componentDisplayName: 'usePreloadedQuery()',
-      fetchKey: fetchKey,
-      fetchObservable: fetchQueryDeduped(environment, operation.request.identifier, function () {
-        if (environment === preloadedQuery.environment && source != null) {
-          return environment.executeWithSource({
-            operation: operation,
-            source: source
-          });
-        } else {
-          return environment.execute({
-            operation: operation
-          });
-        }
-      }),
-      fetchPolicy: fetchPolicy,
-      query: operation,
-      renderPolicy: options === null || options === void 0 ? void 0 : options.UNSTABLE_renderPolicy
-    };
-  } else {
-    process.env.NODE_ENV !== "production" ? warning(preloadedQuery.isDisposed === false, 'usePreloadedQuery(): Expected preloadedQuery to not be disposed yet. ' + 'This is because disposing the query marks it for future garbage ' + 'collection, and as such query results may no longer be present in the Relay ' + 'store. In the future, this will become a hard error.') : void 0;
-    var fallbackFetchObservable = fetchQuery(environment, operation);
-    var fetchObservable;
-    if (source != null && environment === preloadedQuery.environment) {
-      fetchObservable = source.ifEmpty(fallbackFetchObservable);
-    } else if (environment !== preloadedQuery.environment) {
-      process.env.NODE_ENV !== "production" ? warning(false, 'usePreloadedQuery(): usePreloadedQuery was passed a preloaded query ' + 'that was created with a different environment than the one that is currently ' + 'in context. In the future, this will become a hard error.') : void 0;
-      fetchObservable = fallbackFetchObservable;
+  if (preloadedQuery != null) {
+    var fetchKey = preloadedQuery.fetchKey,
+      fetchPolicy = preloadedQuery.fetchPolicy,
+      source = preloadedQuery.source;
+    if (preloadedQuery.kind === 'PreloadedQuery_DEPRECATED') {
+      !(operation.request.node.params.name === preloadedQuery.name) ? process.env.NODE_ENV !== "production" ? invariant(false, 'usePreloadedQuery(): Expected data to be prefetched for query `%s`, ' + 'got prefetch results for query `%s`.', operation.request.node.params.name, preloadedQuery.name) : invariant(false) : void 0;
+      useLazyLoadQueryNodeParams = {
+        componentDisplayName: 'usePreloadedQuery()',
+        fetchKey: fetchKey,
+        fetchObservable: fetchQueryDeduped(environment, operation.request.identifier, function () {
+          if (environment === preloadedQuery.environment && source != null) {
+            return environment.executeWithSource({
+              operation: operation,
+              source: source
+            });
+          } else {
+            return environment.execute({
+              operation: operation
+            });
+          }
+        }),
+        fetchPolicy: fetchPolicy,
+        query: operation,
+        renderPolicy: options === null || options === void 0 ? void 0 : options.UNSTABLE_renderPolicy
+      };
     } else {
-      fetchObservable = fallbackFetchObservable;
+      process.env.NODE_ENV !== "production" ? warning(preloadedQuery.isDisposed === false, 'usePreloadedQuery(): Expected preloadedQuery to not be disposed yet. ' + 'This is because disposing the query marks it for future garbage ' + 'collection, and as such query results may no longer be present in the Relay ' + 'store. In the future, this will become a hard error.') : void 0;
+      var fallbackFetchObservable = fetchQuery(environment, operation);
+      var fetchObservable;
+      if (source != null && environment === preloadedQuery.environment) {
+        fetchObservable = source.ifEmpty(fallbackFetchObservable);
+      } else if (environment !== preloadedQuery.environment) {
+        process.env.NODE_ENV !== "production" ? warning(false, 'usePreloadedQuery(): usePreloadedQuery was passed a preloaded query ' + 'that was created with a different environment than the one that is currently ' + 'in context. In the future, this will become a hard error.') : void 0;
+        fetchObservable = fallbackFetchObservable;
+      } else {
+        fetchObservable = fallbackFetchObservable;
+      }
+      useLazyLoadQueryNodeParams = {
+        componentDisplayName: 'usePreloadedQuery()',
+        fetchKey: fetchKey,
+        fetchObservable: fetchObservable,
+        fetchPolicy: fetchPolicy,
+        query: operation,
+        renderPolicy: options === null || options === void 0 ? void 0 : options.UNSTABLE_renderPolicy
+      };
     }
+  } else {
     useLazyLoadQueryNodeParams = {
       componentDisplayName: 'usePreloadedQuery()',
-      fetchObservable: fetchObservable,
-      fetchKey: fetchKey,
-      fetchPolicy: fetchPolicy,
-      query: operation,
-      renderPolicy: options === null || options === void 0 ? void 0 : options.UNSTABLE_renderPolicy
+      fragmentNode: gqlQuery.fragment
     };
   }
   var data = useLazyLoadQueryNode(useLazyLoadQueryNodeParams);
   if (process.env.NODE_ENV !== "production") {
     useDebugValue({
-      query: preloadedQuery.name,
-      variables: preloadedQuery.variables,
       data: data,
-      fetchKey: fetchKey,
-      fetchPolicy: fetchPolicy,
-      renderPolicy: options === null || options === void 0 ? void 0 : options.UNSTABLE_renderPolicy
+      fetchKey: preloadedQuery === null || preloadedQuery === void 0 ? void 0 : preloadedQuery.fetchKey,
+      fetchPolicy: preloadedQuery === null || preloadedQuery === void 0 ? void 0 : preloadedQuery.fetchPolicy,
+      query: preloadedQuery === null || preloadedQuery === void 0 ? void 0 : preloadedQuery.name,
+      renderPolicy: options === null || options === void 0 ? void 0 : options.UNSTABLE_renderPolicy,
+      variables: preloadedQuery === null || preloadedQuery === void 0 ? void 0 : preloadedQuery.variables
     });
   }
   return data;

package/lib/relay-hooks/useQueryLoader.js

@@ -59,9 +59,9 @@ function useQueryLoader_CURRENT(preloadableRequest, initialQueryReference) {
   }, [isMountedRef]);
   var queryLoaderCallback = useCallback(function (variables, options) {
     var mergedOptions = options != null && options.hasOwnProperty('__environment') ? {
+      __nameForWarning: options.__nameForWarning,
       fetchPolicy: options.fetchPolicy,
-      networkCacheConfig: options.networkCacheConfig,
-      __nameForWarning: options.__nameForWarning
+      networkCacheConfig: options.networkCacheConfig
     } : options;
     if (isMountedRef.current) {
       var _options$__environmen;

package/lib/relay-hooks/useQueryLoader_EXPERIMENTAL.js

@@ -62,9 +62,9 @@ function useQueryLoader_EXPERIMENTAL(preloadableRequest, initialQueryReference)
       return;
     }
     var mergedOptions = options != null && options.hasOwnProperty('__environment') ? {
+      __nameForWarning: options.__nameForWarning,
       fetchPolicy: options.fetchPolicy,
-      networkCacheConfig: options.networkCacheConfig,
-      __nameForWarning: options.__nameForWarning
+      networkCacheConfig: options.networkCacheConfig
     } : options;
     var updatedQueryReference = loadQuery((_options$__environmen = options === null || options === void 0 ? void 0 : options.__environment) !== null && _options$__environmen !== void 0 ? _options$__environmen : environment, preloadableRequest, variables, mergedOptions);
     (_undisposedQueryRefer3 = undisposedQueryReferencesRef.current) === null || _undisposedQueryRefer3 === void 0 ? void 0 : _undisposedQueryRefer3.add(updatedQueryReference);

package/lib/relay-hooks/useRefetchableFragmentInternal.js

@@ -91,9 +91,9 @@ function useRefetchableFragmentInternal(fragmentNode, parentFragmentRef, compone
   var fragmentRef = parentFragmentRef;
   if (shouldReset) {
     dispatch({
-      type: 'reset',
       environment: environment,
-      fragmentIdentifier: fragmentIdentifier
+      fragmentIdentifier: fragmentIdentifier,
+      type: 'reset'
     });
     disposeQuery();
   } else if (refetchQuery != null && queryRef != null) {
@@ -107,13 +107,13 @@ function useRefetchableFragmentInternal(fragmentNode, parentFragmentRef, compone
     var fetchObservable = queryRef.source != null ? queryRef.source : fetchQuery(environment, refetchQuery);
     var queryResult = profilerContext.wrapPrepareQueryResource(function () {
       return QueryResource.prepare(refetchQuery, fetchObservable, fetchPolicy, renderPolicy, {
-        error: handleQueryCompleted,
         complete: function complete() {
           if (process.env.NODE_ENV !== "production") {
             debugFunctions.checkSameTypeAfterRefetch(debugPreviousIDAndTypename, environment, fragmentNode, componentDisplayName);
           }
           handleQueryCompleted();
-        }
+        },
+        error: handleQueryCompleted
       }, queryRef.fetchKey, profilerContext);
     });
     var queryData = readFragmentInternal(environment, queryResult.fragmentNode, queryResult.fragmentRef, componentDisplayName).data;
@@ -174,17 +174,17 @@ function useRefetchFunction(componentDisplayName, dispatch, disposeQuery, fragme
       force: true
     });
     loadQuery(refetchQuery.request.variables, {
-      fetchPolicy: fetchPolicy,
       __environment: refetchEnvironment,
-      __nameForWarning: 'refetch'
+      __nameForWarning: 'refetch',
+      fetchPolicy: fetchPolicy
     });
     dispatch({
-      type: 'refetch',
       fetchPolicy: fetchPolicy,
       onComplete: onComplete,
       refetchEnvironment: refetchEnvironment,
       refetchQuery: refetchQuery,
-      renderPolicy: renderPolicy
+      renderPolicy: renderPolicy,
+      type: 'refetch'
     });
     return {
       dispose: disposeQuery
@@ -194,23 +194,16 @@ function useRefetchFunction(componentDisplayName, dispatch, disposeQuery, fragme
 var debugFunctions;
 if (process.env.NODE_ENV !== "production") {
   debugFunctions = {
-    getInitialIDAndType: function getInitialIDAndType(memoRefetchVariables, fragmentRefPathInResponse, identifierQueryVariableName, environment) {
-      var _require4 = require('relay-runtime'),
-        Record = _require4.Record;
-      var id = memoRefetchVariables === null || memoRefetchVariables === void 0 ? void 0 : memoRefetchVariables[identifierQueryVariableName !== null && identifierQueryVariableName !== void 0 ? identifierQueryVariableName : 'id'];
-      if (fragmentRefPathInResponse.length !== 1 || fragmentRefPathInResponse[0] !== 'node' || id == null) {
-        return null;
+    checkSameIDAfterRefetch: function checkSameIDAfterRefetch(previousIDAndTypename, refetchedFragmentRef, fragmentNode, componentDisplayName) {
+      if (previousIDAndTypename == null || refetchedFragmentRef == null) {
+        return;
       }
-      var recordSource = environment.getStore().getSource();
-      var record = recordSource.get(id);
-      var typename = record == null ? null : Record.getType(record);
-      if (typename == null) {
-        return null;
+      var _require4 = require('relay-runtime'),
+        ID_KEY = _require4.ID_KEY;
+      var resultID = refetchedFragmentRef[ID_KEY];
+      if (resultID != null && resultID !== previousIDAndTypename.id) {
+        process.env.NODE_ENV !== "production" ? warning(false, 'Relay: Call to `refetch` returned a different id, expected ' + '`%s`, got `%s`, on `%s` in `%s`. ' + 'Please make sure the server correctly implements ' + 'unique id requirement.', resultID, previousIDAndTypename.id, fragmentNode.name, componentDisplayName) : void 0;
       }
-      return {
-        id: id,
-        typename: typename
-      };
     },
     checkSameTypeAfterRefetch: function checkSameTypeAfterRefetch(previousIDAndType, environment, fragmentNode, componentDisplayName) {
       var _require5 = require('relay-runtime'),
@@ -225,16 +218,23 @@ if (process.env.NODE_ENV !== "production") {
         process.env.NODE_ENV !== "production" ? warning(false, 'Relay: Call to `refetch` returned data with a different ' + '__typename: was `%s`, now `%s`, on `%s` in `%s`. ' + 'Please make sure the server correctly implements' + 'unique id requirement.', previousIDAndType.typename, typename, fragmentNode.name, componentDisplayName) : void 0;
       }
     },
-    checkSameIDAfterRefetch: function checkSameIDAfterRefetch(previousIDAndTypename, refetchedFragmentRef, fragmentNode, componentDisplayName) {
-      if (previousIDAndTypename == null || refetchedFragmentRef == null) {
-        return;
-      }
+    getInitialIDAndType: function getInitialIDAndType(memoRefetchVariables, fragmentRefPathInResponse, identifierQueryVariableName, environment) {
       var _require6 = require('relay-runtime'),
-        ID_KEY = _require6.ID_KEY;
-      var resultID = refetchedFragmentRef[ID_KEY];
-      if (resultID != null && resultID !== previousIDAndTypename.id) {
-        process.env.NODE_ENV !== "production" ? warning(false, 'Relay: Call to `refetch` returned a different id, expected ' + '`%s`, got `%s`, on `%s` in `%s`. ' + 'Please make sure the server correctly implements ' + 'unique id requirement.', resultID, previousIDAndTypename.id, fragmentNode.name, componentDisplayName) : void 0;
+        Record = _require6.Record;
+      var id = memoRefetchVariables === null || memoRefetchVariables === void 0 ? void 0 : memoRefetchVariables[identifierQueryVariableName !== null && identifierQueryVariableName !== void 0 ? identifierQueryVariableName : 'id'];
+      if (fragmentRefPathInResponse.length !== 1 || fragmentRefPathInResponse[0] !== 'node' || id == null) {
+        return null;
       }
+      var recordSource = environment.getStore().getSource();
+      var record = recordSource.get(id);
+      var typename = record == null ? null : Record.getType(record);
+      if (typename == null) {
+        return null;
+      }
+      return {
+        id: id,
+        typename: typename
+      };
     }
   };
 }

package/lib/rsc-client_EXPERIMENTAL.js

@@ -0,0 +1,7 @@
+'use client';
+'use strict';
+
+var useQueryFromServer = require('./relay-hooks/rsc/useQueryFromServer');
+module.exports = {
+  useQueryFromServer: useQueryFromServer
+};

package/lib/rsc_EXPERIMENTAL.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var _asyncToGenerator = require("@babel/runtime/helpers/asyncToGenerator").default;
+var serverFetchQueryImpl = require('./relay-hooks/rsc/serverFetchQuery');
+var serverPreloadQueryImpl = require('./relay-hooks/rsc/serverPreloadQuery');
+var serverReadFragmentImpl = require('./relay-hooks/rsc/serverReadFragment');
+var invariant = require('invariant');
+var React = require('react');
+function createServerEnvironment(create) {
+  var cache = React.cache;
+  !(typeof cache === 'function') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Relay RSC APIs require React 19+') : invariant(false) : void 0;
+  var getEnvironment = cache(create);
+  function serverFetchQuery(_x, _x2) {
+    return _serverFetchQuery.apply(this, arguments);
+  }
+  function _serverFetchQuery() {
+    _serverFetchQuery = _asyncToGenerator(function* (query, variables) {
+      return serverFetchQueryImpl(getEnvironment(), query, variables);
+    });
+    return _serverFetchQuery.apply(this, arguments);
+  }
+  function serverPreloadQuery(query, variables) {
+    return serverPreloadQueryImpl(getEnvironment(), query, variables);
+  }
+  function serverReadFragment(_x3, _x4) {
+    return _serverReadFragment.apply(this, arguments);
+  }
+  function _serverReadFragment() {
+    _serverReadFragment = _asyncToGenerator(function* (fragment, fragmentRef) {
+      return serverReadFragmentImpl(getEnvironment(), fragment, fragmentRef);
+    });
+    return _serverReadFragment.apply(this, arguments);
+  }
+  return {
+    getEnvironment: getEnvironment,
+    serverFetchQuery: serverFetchQuery,
+    serverPreloadQuery: serverPreloadQuery,
+    serverReadFragment: serverReadFragment
+  };
+}
+module.exports = {
+  createServerEnvironment: createServerEnvironment
+};

package/multi-actor/ActorChange.js.flow

@@ -17,7 +17,7 @@ const RelayEnvironmentProvider = require('../relay-hooks/RelayEnvironmentProvide
 const useRelayActorEnvironment = require('./useRelayActorEnvironment');
 const React = require('react');
 
-export opaque type ActorChangePoint<TFragmentRef> = $ReadOnly<{
+export opaque type ActorChangePoint<TFragmentRef> = Readonly<{
   __fragmentRef: TFragmentRef,
   __viewer: ActorIdentifier,
 }>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-relay",
   "description": "A framework for building GraphQL-driven React applications.",
-  "version": "20.1.1",
+  "version": "21.0.0",
   "keywords": [
     "graphql",
     "relay",
@@ -20,7 +20,7 @@
     "fbjs": "^3.0.2",
     "invariant": "^2.2.4",
     "nullthrows": "^1.1.1",
-    "relay-runtime": "20.1.1"
+    "relay-runtime": "21.0.0"
   },
   "peerDependencies": {
     "react": "^16.9.0 || ^17 || ^18 || ^19"
@@ -29,5 +29,6 @@
     "": "./"
   },
   "main": "index.js",
+  "types": "index.d.ts",
   "haste_commonjs": true
 }

package/relay-hooks/EntryPointContainer.react.js.flow

@@ -24,16 +24,16 @@ const warning = require('warning');
 
 component EntryPointContainer<
   // $FlowFixMe[unsupported-variance-annotation]
-  TRuntimeProps: {...},
-  TRenders: React.Node,
+  TRuntimeProps extends {...},
+  TRenders extends React.Node,
   // $FlowFixMe[unsupported-variance-annotation]
-  TEntryPointComponent: EntryPointComponent<
-    // $FlowExpectedErrors[unclear-type] Use any to accept all kinds of EntryPointComponent
+  TEntryPointComponent extends EntryPointComponent<
+    // $FlowExpectedError[unclear-type] s[unclear-type] Use any to accept all kinds of EntryPointComponent
     any,
-    // $FlowExpectedErrors[unclear-type] Use any to accept all kinds of EntryPointComponent
+    // $FlowExpectedError[unclear-type] s[unclear-type] Use any to accept all kinds of EntryPointComponent
     any,
     TRuntimeProps,
-    // $FlowExpectedErrors[unclear-type] Use any to accept all kinds of EntryPointComponent
+    // $FlowExpectedError[unclear-type] s[unclear-type] Use any to accept all kinds of EntryPointComponent
     any,
     TRenders,
   >,

package/relay-hooks/EntryPointTypes.flow.js.flow

@@ -37,6 +37,7 @@ export type PreloadOptions = {
   +fetchKey?: string | number,
   +fetchPolicy?: ?PreloadFetchPolicy,
   +includeIf?: ?boolean,
+  +enableForOfflineCacheJob?: ?boolean,
   +prefetchExpiryInHours?: ?number,
   +networkCacheConfig?: ?CacheConfig,
 };
@@ -47,7 +48,7 @@ export type LoadQueryOptions = {
   +__nameForWarning?: ?string,
 };
 
-export type PreloadableConcreteRequest<+TQuery: OperationType> = {
+export type PreloadableConcreteRequest<+TQuery extends OperationType> = {
   kind: 'PreloadableConcreteRequest',
   params: RequestParameters,
   // Note: the phantom type parameter here helps ensures that the
@@ -58,17 +59,17 @@ export type PreloadableConcreteRequest<+TQuery: OperationType> = {
   +__phantom__?: ?TQuery,
 };
 
-export type EnvironmentProviderOptions = {+[string]: mixed, ...};
+export type EnvironmentProviderOptions = {+[string]: unknown, ...};
 
 export type PreloadedQuery<
-  +TQuery: OperationType,
+  +TQuery extends OperationType,
   TEnvironmentProviderOptions = EnvironmentProviderOptions,
 > =
   | PreloadedQueryInner_DEPRECATED<TQuery, TEnvironmentProviderOptions>
   | PreloadedQueryInner<TQuery, TEnvironmentProviderOptions>;
 
 export type PreloadedQueryInner_DEPRECATED<
-  +TQuery: OperationType,
+  +TQuery extends OperationType,
   TEnvironmentProviderOptions = EnvironmentProviderOptions,
 > = {
   +kind: 'PreloadedQuery_DEPRECATED',
@@ -85,7 +86,7 @@ export type PreloadedQueryInner_DEPRECATED<
 };
 
 export type PreloadedQueryInner<
-  +TQuery: OperationType,
+  +TQuery extends OperationType,
   TEnvironmentProviderOptions = EnvironmentProviderOptions,
 > = {
   // Releases query data and cancels network request if still in flight
@@ -125,40 +126,21 @@ Every .entrypoint file it's an object that must have two required fields:
 TEntryPointParams - object that contains all necessary information to execute
 the preloaders (routeParams, query variables)
 
-TPreloadedQueries -  queries, defined in the root components
-
-TPreloadedEntryPoints - nested entry points, defined in the root components
-
-TRuntimeProps - the type of additional props that you may pass to the
-component (like `onClick` handler, etc) during runtime. Values for them
-defined during component runtime
-
-TExtraProps - a bag of extra props that you may define in `entrypoint` file
-and they will be passed to the EntryPointComponent as `extraProps`
+TEntryPointComponent -  the root components
 */
-export type InternalEntryPointRepresentation<
-  TEntryPointParams,
-  TPreloadedQueries,
-  TPreloadedEntryPoints = {...},
-  TRuntimeProps = {...},
-  TExtraProps = null,
-> = $ReadOnly<{
+export type EntryPoint<
+  -TEntryPointParams,
+  // $FlowExpectedError[unclear-type] accepts any root component
+  +TEntryPointComponent extends EntryPointComponent<any, any, any, any, any>,
+> = Readonly<{
   getPreloadProps: (
     entryPointParams: TEntryPointParams,
   ) => PreloadProps<
-    TEntryPointParams,
-    TPreloadedQueries,
-    TPreloadedEntryPoints,
-    TExtraProps,
-  >,
-  root: JSResourceReference<
-    EntryPointComponent<
-      TPreloadedQueries,
-      TPreloadedEntryPoints,
-      TRuntimeProps,
-      TExtraProps,
-    >,
+    ElementConfig<TEntryPointComponent>['queries'],
+    ElementConfig<TEntryPointComponent>['entryPoints'],
+    ElementConfig<TEntryPointComponent>['extraProps'],
   >,
+  root: JSResourceReference<TEntryPointComponent>,
 }>;
 
 // The shape of the props of the entry point `root` component
@@ -167,20 +149,36 @@ export type EntryPointProps<
   TPreloadedEntryPoints = {},
   TRuntimeProps = {},
   TExtraProps = null,
-> = $ReadOnly<{
+> = Readonly<{
   entryPoints: TPreloadedEntryPoints,
   extraProps: TExtraProps | null,
   props: TRuntimeProps,
   queries: TPreloadedQueries,
 }>;
 
-// Type of the entry point `root` component
+/**
+Type of the entry point `root` component
+
+TEntryPointParams - object that contains all necessary information to execute
+the preloaders (routeParams, query variables)
+
+TPreloadedQueries -  queries, defined in the root components
+
+TPreloadedEntryPoints - nested entry points, defined in the root components
+
+TRuntimeProps - the type of additional props that you may pass to the
+component (like `onClick` handler, etc) during runtime. Values for them
+defined during component runtime
+
+TExtraProps - a bag of extra props that you may define in `entrypoint` file
+and they will be passed to the EntryPointComponent as `extraProps`
+*/
 export type EntryPointComponent<
   TPreloadedQueries,
   TPreloadedEntryPoints = {},
   TRuntimeProps = {},
   TExtraProps = null,
-  TRenders: React.Node = React.Node,
+  +TRenders extends React.Node = React.Node,
 > = component(
   ...EntryPointProps<
     TPreloadedQueries,
@@ -192,13 +190,12 @@ export type EntryPointComponent<
 
 // Return type of the `getPreloadProps(...)` of the entry point
 export type PreloadProps<
-  +TPreloadParams,
   // $FlowExpectedError[unclear-type] Need any to make it supertype of all PreloadedQuery
-  TPreloadedQueries: {+[string]: PreloadedQuery<any>},
-  TPreloadedEntryPoints: {...},
+  TPreloadedQueries extends {+[string]: ?PreloadedQuery<any>},
+  TPreloadedEntryPoints extends {...},
   TExtraProps = null,
   TEnvironmentProviderOptions = EnvironmentProviderOptions,
-> = $ReadOnly<{
+> = Readonly<{
   entryPoints?: {
     +[K in keyof TPreloadedEntryPoints]?: ?ThinNestedEntryPointParams,
   },
@@ -207,7 +204,7 @@ export type PreloadProps<
 }>;
 
 // Return type of `loadEntryPoint(...)`
-export type PreloadedEntryPoint<TEntryPointComponent> = $ReadOnly<{
+export type PreloadedEntryPoint<TEntryPointComponent> = Readonly<{
   dispose: () => void,
   entryPoints: ElementConfig<TEntryPointComponent>['entryPoints'],
   extraProps: ElementConfig<TEntryPointComponent>['extraProps'],
@@ -218,27 +215,24 @@ export type PreloadedEntryPoint<TEntryPointComponent> = $ReadOnly<{
 }>;
 
 export type EntryPointElementConfig<
-  // $FlowExpectedError[unclear-type] Need any to make it supertype of all InternalEntryPointRepresentation
-  +TEntryPoint: InternalEntryPointRepresentation<any, any, any, any, any>,
-> =
-  TEntryPoint extends InternalEntryPointRepresentation<
-    // $FlowExpectedError[unclear-type] Need any to make it supertype of all InternalEntryPointRepresentation
-    any,
+  +TEntryPoint extends EntryPoint<
     // $FlowExpectedError[unclear-type] Need any to make it supertype of all InternalEntryPointRepresentation
     any,
     // $FlowExpectedError[unclear-type] Need any to make it supertype of all InternalEntryPointRepresentation
     any,
-    infer Props,
-    // $FlowExpectedError[unclear-type] Need any to make it supertype of all InternalEntryPointRepresentation
-    any,
+  >,
+> =
+  TEntryPoint extends EntryPoint<
+    infer _EntryPointParams,
+    infer EntryPointComponent,
   >
-    ? Props
+    ? ElementConfig<EntryPointComponent>['props']
     : empty;
 
 export type ThinQueryParams<
-  +TQuery: OperationType,
+  +TQuery extends OperationType,
   TEnvironmentProviderOptions,
-> = $ReadOnly<{
+> = Readonly<{
   environmentProviderOptions?: ?TEnvironmentProviderOptions,
   options?: ?PreloadOptions,
   parameters: PreloadableConcreteRequest<TQuery>,
@@ -261,20 +255,24 @@ export type ExtractQueryTypeHelper<TEnvironmentProviderOptions> = <TQuery>(
 // because PreloadedQuery's TQuery parameter is almost phantom, and breaking
 // up the union type would cause us to lose track of TQuery.
 type ExtractThinQueryParams<T, TEnvironmentProviderOptions> = [+t: T] extends [
-  // $FlowFixMe[incompatible-type-arg]
-  +t: PreloadedQuery<infer TQuery>,
+  // $FlowFixMe[incompatible-type]
+  +t: PreloadedQuery<infer TQuery extends OperationType>,
 ]
   ? ThinQueryParams<TQuery, TEnvironmentProviderOptions>
   : [+t: T] extends [
         +t: PreloadedQuery<infer TQuery extends OperationType> | void,
       ]
     ? ThinQueryParams<TQuery, TEnvironmentProviderOptions> | void
-    : empty;
+    : [+t: T] extends [
+          +t: PreloadedQuery<infer TQuery extends OperationType> | null | void,
+        ]
+      ? ThinQueryParams<TQuery, TEnvironmentProviderOptions> | null | void
+      : empty;
 
 export type ExtractQueryTypes<
   TEnvironmentProviderOptions,
   // $FlowExpectedError[unclear-type] Need any to make it supertype of all PreloadedQuery
-  PreloadedQueries: {+[string]: PreloadedQuery<any>} | void,
+  PreloadedQueries extends {+[string]: ?PreloadedQuery<any>} | void,
 > = {
   [K in keyof PreloadedQueries]: ExtractThinQueryParams<
     PreloadedQueries[K],
@@ -282,17 +280,13 @@ export type ExtractQueryTypes<
   >,
 };
 
-export type EntryPoint<TEntryPointParams, +TEntryPointComponent> =
-  InternalEntryPointRepresentation<
-    TEntryPointParams,
-    ElementConfig<TEntryPointComponent>['queries'],
-    ElementConfig<TEntryPointComponent>['entryPoints'],
-    ElementConfig<TEntryPointComponent>['props'],
-    ElementConfig<TEntryPointComponent>['extraProps'],
-  >;
+// $FlowFixMe[unclear-type]: we don't care about the props
+export type RootComponentRenders<+C extends component(...any)> =
+  // $FlowFixMe[unclear-type]: we don't care about the props
+  C extends component(...any) renders infer R extends React.Node ? R : empty;
 
 export type PreloadParamsOf<T> = Parameters<T['getPreloadProps']>[0];
 
-export type IEnvironmentProvider<TOptions> = $ReadOnly<{
+export type IEnvironmentProvider<TOptions> = Readonly<{
   getEnvironment: (options: ?TOptions) => IEnvironment,
 }>;