How to use the relay-runtime.createFragmentSpecResolver function in relay-runtime

// Any props change could impact the query, so we mirror props in state.
        // This is an unusual pattern, but necessary for this container usecase.
        var prevProps = prevState.prevProps;
        var relayContext = assertRelayContext(nextProps.__relayContext);
        var prevIDs = relayRuntime.getDataIDsFromObject(fragments, prevProps);
        var nextIDs = relayRuntime.getDataIDsFromObject(fragments, nextProps); // If the environment has changed or props point to new records then
        // previously fetched data and any pending fetches no longer apply:
        // - Existing references are on the old environment.
        // - Existing references are based on old variables.
        // - Pending fetches are for the previous records.

        if (prevState.prevPropsContext.environment !== relayContext.environment || prevState.prevPropsContext.variables !== relayContext.variables || !areEqual(prevIDs, nextIDs)) {
          this._cleanup(); // Child containers rely on context.relay being mutated (for gDSFP).


          this._resolver = relayRuntime.createFragmentSpecResolver(relayContext, containerName, fragments, nextProps, this._handleFragmentDataUpdate);
          return {
            data: this._resolver.resolve(),
            prevProps: nextProps,
            prevPropsContext: relayContext,
            contextForChildren: relayContext,
            relayProp: this._buildRelayProp(relayContext)
          };
        } else if (!this._hasFetched) {
          this._resolver.setProps(nextProps);
        }

        var data = this._resolver.resolve();

        if (data !== this.state.data) {
          return {
            data: data,

const relayContext = assertRelayContext(nextProps.__relayContext);
      const prevIDs = getDataIDsFromObject(fragments, this.props);
      const nextIDs = getDataIDsFromObject(fragments, nextProps);

      // If the environment has changed or props point to new records then
      // previously fetched data and any pending fetches no longer apply:
      // - Existing references are on the old environment.
      // - Existing references are based on old variables.
      // - Pending fetches are for the previous records.
      if (
        relayContext.environment !== this.state.prevContext.environment ||
        !areEqual(prevIDs, nextIDs)
      ) {
        this._cleanup();
        // Child containers rely on context.relay being mutated (for gDSFP).
        this._resolver = createFragmentSpecResolver(
          relayContext,
          containerName,
          fragments,
          nextProps,
          this._handleFragmentDataUpdate,
        );
        this.setState({
          prevContext: relayContext,
          contextForChildren: relayContext,
          relayProp: this._buildRelayProp(relayContext),
        });
      } else if (!this._hasFetched) {
        this._resolver.setProps(nextProps);
      }
      const data = this._resolver.resolve();
      if (data !== this.state.data) {

// Any props change could impact the query, so we mirror props in state.
        // This is an unusual pattern, but necessary for this container usecase.
        var prevProps = prevState.prevProps;
        var relayContext = assertRelayContext(nextProps.__relayContext);
        var prevIDs = getDataIDsFromObject(fragments, prevProps);
        var nextIDs = getDataIDsFromObject(fragments, nextProps); // If the environment has changed or props point to new records then
        // previously fetched data and any pending fetches no longer apply:
        // - Existing references are on the old environment.
        // - Existing references are based on old variables.
        // - Pending fetches are for the previous records.

        if (prevState.prevPropsContext.environment !== relayContext.environment || prevState.prevPropsContext.variables !== relayContext.variables || !areEqual(prevIDs, nextIDs)) {
          this._cleanup(); // Child containers rely on context.relay being mutated (for gDSFP).


          this._resolver = createFragmentSpecResolver(relayContext, containerName, fragments, nextProps, this._handleFragmentDataUpdate);
          return {
            data: this._resolver.resolve(),
            prevProps: nextProps,
            prevPropsContext: relayContext,
            contextForChildren: relayContext,
            relayProp: this._buildRelayProp(relayContext)
          };
        } else if (!this._hasFetched) {
          this._resolver.setProps(nextProps);
        }

        var data = this._resolver.resolve();

        if (data !== this.state.data) {
          return {
            data: data,

var prevProps = prevState.prevProps;
        var relayContext = assertRelayContext(nextProps.__relayContext);
        var prevIDs = getDataIDsFromObject(fragments, prevProps);
        var nextIDs = getDataIDsFromObject(fragments, nextProps);
        var resolver = prevState.resolver; // If the environment has changed or props point to new records then
        // previously fetched data and any pending fetches no longer apply:
        // - Existing references are on the old environment.
        // - Existing references are based on old variables.
        // - Pending fetches are for the previous records.

        if (prevState.prevPropsContext.environment !== relayContext.environment || prevState.prevPropsContext.variables !== relayContext.variables || !areEqual(prevIDs, nextIDs)) {
          // Do not provide a subscription/callback here.
          // It is possible for this render to be interrupted or aborted,
          // In which case the subscription would cause a leak.
          // We will add the subscription in componentDidUpdate().
          resolver = createFragmentSpecResolver(relayContext, containerName, fragments, nextProps);
          return {
            data: resolver.resolve(),
            prevPropsContext: relayContext,
            prevProps: nextProps,
            relayProp: getRelayProp(relayContext.environment),
            resolver: resolver
          };
        } else {
          resolver.setProps(nextProps);
          var data = resolver.resolve();

          if (data !== prevState.data) {
            return {
              data: data,
              prevProps: nextProps,
              prevPropsContext: relayContext,

data: function data() {
      var relayContext = assertRelayContext(this.props.__relayContext);
      this._refetchSubscription = null; // Do not provide a subscription/callback here.
      // It is possible for this render to be interrupted or aborted,
      // In which case the subscription would cause a leak.
      // We will add the subscription in componentDidMount().

      var resolver = createFragmentSpecResolver(relayContext, containerName, fragments, this.$props);
      this.state = {
        data: resolver.resolve(),
        localVariables: null,
        prevProps: _objectSpread2({}, this.$props, {}, this.props),
        prevPropsContext: relayContext,
        contextForChildren: relayContext,
        relayProp: getRelayProp$1(relayContext.environment, this._refetch),
        resolver: resolver
      };
      this._isUnmounted = false;
      return {};
    },
    methods: {

let resolver = prevState.resolver;

      // If the environment has changed or props point to new records then
      // previously fetched data and any pending fetches no longer apply:
      // - Existing references are on the old environment.
      // - Existing references are based on old variables.
      // - Pending fetches are for the previous records.
      if (
        prevState.prevPropsContext.environment !== relayContext.environment ||
        !areEqual(prevIDs, nextIDs)
      ) {
        // Do not provide a subscription/callback here.
        // It is possible for this render to be interrupted or aborted,
        // In which case the subscription would cause a leak.
        // We will add the subscription in componentDidUpdate().
        resolver = createFragmentSpecResolver(
          relayContext,
          containerName,
          fragments,
          nextProps,
        );
        return {
          data: resolver.resolve(),
          localVariables: null,
          prevProps: nextProps,
          prevPropsContext: relayContext,
          contextForChildren: relayContext,
          relayProp: getRelayProp(
            relayContext.environment,
            prevState.relayProp.refetch,
          ),
          resolver,

// If the environment has changed or props point to new records then
        // previously fetched data and any pending fetches no longer apply:
        // - Existing references are on the old environment.
        // - Existing references are based on old variables.
        // - Pending fetches are for the previous records.
        if (
          prevState.prevPropsContext.environment !== relayContext.environment ||
          prevState.prevPropsContext.variables !== relayContext.variables ||
          !areEqual(prevIDs, nextIDs)
        ) {
          // Do not provide a subscription/callback here.
          // It is possible for this render to be interrupted or aborted,
          // In which case the subscription would cause a leak.
          // We will add the subscription in componentDidUpdate().
          resolver = createFragmentSpecResolver(
            relayContext,
            containerName,
            fragments,
            nextProps
          )
          return {
            data: resolver.resolve(),
            localVariables: null,
            prevProps: nextProps,
            prevPropsContext: relayContext,
            contextForChildren: relayContext,
            relayProp: getRelayProp(
              relayContext.environment,
              prevState.relayProp.refetch
            ),
            resolver

var prevProps = prevState.prevProps;
        var relayContext = assertRelayContext(nextProps.__relayContext);
        var prevIDs = relayRuntime.getDataIDsFromObject(fragments, prevProps);
        var nextIDs = relayRuntime.getDataIDsFromObject(fragments, nextProps);
        var resolver = prevState.resolver; // If the environment has changed or props point to new records then
        // previously fetched data and any pending fetches no longer apply:
        // - Existing references are on the old environment.
        // - Existing references are based on old variables.
        // - Pending fetches are for the previous records.

        if (prevState.prevPropsContext.environment !== relayContext.environment || prevState.prevPropsContext.variables !== relayContext.variables || !areEqual(prevIDs, nextIDs)) {
          // Do not provide a subscription/callback here.
          // It is possible for this render to be interrupted or aborted,
          // In which case the subscription would cause a leak.
          // We will add the subscription in componentDidUpdate().
          resolver = relayRuntime.createFragmentSpecResolver(relayContext, containerName, fragments, nextProps);
          return {
            data: resolver.resolve(),
            localVariables: null,
            prevProps: nextProps,
            prevPropsContext: relayContext,
            contextForChildren: relayContext,
            relayProp: getRelayProp$1(relayContext.environment, prevState.relayProp.refetch),
            resolver: resolver
          };
        } else if (!prevState.localVariables) {
          resolver.setProps(nextProps);
        }

        var data = resolver.resolve();

        if (data !== prevState.data) {

// If the environment has changed or props point to new records then
        // previously fetched data and any pending fetches no longer apply:
        // - Existing references are on the old environment.
        // - Existing references are based on old variables.
        // - Pending fetches are for the previous records.
        if (
          prevState.prevPropsContext.environment !== relayContext.environment ||
          prevState.prevPropsContext.variables !== relayContext.variables ||
          !areEqual(prevIDs, nextIDs)
        ) {
          // Do not provide a subscription/callback here.
          // It is possible for this render to be interrupted or aborted,
          // In which case the subscription would cause a leak.
          // We will add the subscription in componentDidUpdate().
          resolver = createFragmentSpecResolver(
            relayContext,
            containerName,
            fragments,
            nextProps
          )

          return {
            data: resolver.resolve(),
            prevPropsContext: relayContext,
            prevProps: nextProps,
            relayProp: getRelayProp(relayContext.environment),
            resolver
          }
        } else {
          resolver.setProps(nextProps)

data: function data() {
      var relayContext = assertRelayContext(this.props.__relayContext);
      this._isARequestInFlight = false;
      this._refetchSubscription = null;
      this._refetchVariables = null;
      this._resolver = relayRuntime.createFragmentSpecResolver(relayContext, containerName, fragments, this.$props, this._handleFragmentDataUpdate);
      this.state = {
        data: this._resolver.resolve(),
        prevProps: _objectSpread2({}, this.$props, {}, this.props),
        prevPropsContext: relayContext,
        contextForChildren: relayContext,
        relayProp: this._buildRelayProp(relayContext)
      };
      this._isUnmounted = false;
      this._hasFetched = false;
      return {};
    },
    methods: {