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

function fetchQueryAndComputeStateFromProps(
  props: Props,
  queryFetcher: ReactRelayQueryFetcher,
  retryCallbacks: RetryCallbacks,
  requestCacheKey: ?string,
): $Shape {
  const {environment, query, variables} = props;
  const genericEnvironment = (environment: IEnvironment);
  if (query) {
    const request = getRequest(query);
    const operation = createOperationDescriptor(request, variables);
    const relayContext: RelayContext = {
      environment: genericEnvironment,
    };
    if (typeof requestCacheKey === 'string' && requestCache[requestCacheKey]) {
      // This same request is already in flight.

      const {snapshot} = requestCache[requestCacheKey];
      if (snapshot) {
        // Use the cached response
        return {
          error: null,
          relayContext,
          renderProps: getRenderProps(
            null,
            snapshot,

});
        fragmentVariables = relayRuntime.getVariablesFromObject( // NOTE: We pass empty operationVariables because we want to prefer
        // the variables from the fragment owner
        {}, fragments, restProps, fragmentOwners);
        fragmentVariables = _objectSpread2({}, rootVariables, {}, fragmentVariables, {}, this._refetchVariables);
        var fetchVariables = connectionConfig.getVariables(props, {
          count: paginatingVariables.count,
          cursor: paginatingVariables.cursor
        }, fragmentVariables);
        invariant(_typeof(fetchVariables) === 'object' && fetchVariables !== null, 'VueRelayPaginationContainer: Expected `getVariables()` to ' + 'return an object, got `%s` in `%s`.', fetchVariables, componentName);
        fetchVariables = _objectSpread2({}, fetchVariables, {}, this._refetchVariables);
        fragmentVariables = _objectSpread2({}, fetchVariables, {}, fragmentVariables);
        var cacheConfig = options ? {
          force: !!options.force
        } : undefined;
        var request = relayRuntime.getRequest(connectionConfig.query);
        var operation = relayRuntime.createOperationDescriptor(request, fetchVariables);
        var refetchSubscription = null;

        if (this._refetchSubscription) {
          this._refetchSubscription.unsubscribe();
        }

        this._hasFetched = true;

        var onNext = function onNext(_, complete) {
          var contextVariables = _objectSpread2({}, _this.props.__relayContext.variables, {}, fragmentVariables);

          var prevData = _this._resolver.resolve();

          _this._resolver.setVariables(getFragmentVariables(fragmentVariables, paginatingVariables.totalCount), operation.node);

: undefined;
      if (cacheConfig != null && options?.metadata != null) {
        cacheConfig.metadata = options?.metadata;
      }

      const observer =
        typeof observerOrCallback === 'function'
          ? {
              // callback is not exectued on complete or unsubscribe
              // for backward compatibility
              next: observerOrCallback,
              error: observerOrCallback,
            }
          : observerOrCallback || ({}: any);

      const query = getRequest(taggedNode);
      const operation = createOperationDescriptor(query, fetchVariables);

      // TODO: T26288752 find a better way
      /* eslint-disable lint/react-state-props-mutation */
      this.state.localVariables = fetchVariables;
      /* eslint-enable lint/react-state-props-mutation */

      // Cancel any previously running refetch.
      this._refetchSubscription && this._refetchSubscription.unsubscribe();

      // Declare refetchSubscription before assigning it in .start(), since
      // synchronous completion may call callbacks .subscribe() returns.
      let refetchSubscription;

      const storeSnapshot = this._getQueryFetcher().lookupInStore(
        environment,

// Callbacks are attached to the current instance and shared with static
    // lifecyles by bundling with state. This is okay to do because the
    // callbacks don't change in reaction to props. However we should not
    // "leak" them before mounting (since we would be unable to clean up). For
    // that reason, we define them as null initially and fill them in after
    // mounting to avoid leaking memory.
    var retryCallbacks = {
      handleDataChange: null,
      handleRetryAfterError: null
    };
    var queryFetcher;
    var requestCacheKey;

    if (this.query) {
      var query = this.query;
      var request = getRequest(query);
      requestCacheKey = getRequestCacheKey(request.params, this.variables);
      queryFetcher = requestCache[requestCacheKey] ? requestCache[requestCacheKey].queryFetcher : new VueRelayQueryFetcher();
    } else {
      queryFetcher = new VueRelayQueryFetcher();
    }

    this.state = _objectSpread2({
      prevPropsEnvironment: this.environment,
      prevPropsVariables: this.variables,
      prevQuery: this.query,
      queryFetcher: queryFetcher,
      retryCallbacks: retryCallbacks
    }, fetchQueryAndComputeStateFromProps(this.$props, queryFetcher, retryCallbacks, requestCacheKey));
    return {};
  },
  methods: {

'useFragment pagination',
        );
        fetchVariables = {
            ...fetchVariables,
            ...this._refetchVariables,
        };
        fragmentVariables = {
            ...fetchVariables,
            ...fragmentVariables,
        };

        const cacheConfig: CacheConfig = options ? { force: !!options.force } : undefined;
        if (cacheConfig != null && options && options.metadata != null) {
            cacheConfig.metadata = options.metadata;
        }
        const request = getRequest(connectionConfig.query);
        const operation = createOperationDescriptor(request, fetchVariables);

        let refetchSubscription = null;

        if (this._refetchSubscription) {
            this._refetchSubscription.unsubscribe();
        }
        this._hasFetched = true;

        const onNext = (payload, complete) => {
            const contextVariables = {
                ...fragmentVariables,
            };
            const prevData = resolver.resolve();
            resolver.setVariables(
                this._getFragmentVariables(fragmentVariables, paginatingVariables.totalCount),

fetchVariables = {
        ...fetchVariables,
        ...this._refetchVariables,
      };
      fragmentVariables = {
        ...fetchVariables,
        ...fragmentVariables,
      };

      const cacheConfig: ?CacheConfig = options
        ? {force: !!options.force}
        : undefined;
      if (cacheConfig != null && options?.metadata != null) {
        cacheConfig.metadata = options?.metadata;
      }
      const request = getRequest(connectionConfig.query);
      const operation = createOperationDescriptor(request, fetchVariables);

      let refetchSubscription = null;

      if (this._refetchSubscription) {
        this._refetchSubscription.unsubscribe();
      }
      this._hasFetched = true;

      const onNext = (payload, complete) => {
        const prevData = this._resolver.resolve();
        this._resolver.setVariables(
          getFragmentVariables(
            fragmentVariables,
            paginatingVariables.totalCount,
          ),

const operation: OperationSelector = useMemo(() => {
        if (skipLookup && skipExecute) {
            return null;
        }
        const query = getRequest(taggedNode);
        if (query.params.operationKind !== 'query') {
            throw new Error('useQuery: Expected query operation');
        }
        return createOperationDescriptor(query, variables);
    }, inputs);

    () => createOperationDescriptor(getRequest(gqlQuery), memoVariables),
    [gqlQuery, memoVariables],

fetchVariables,
          componentName
        )
        fetchVariables = {
          ...fetchVariables,
          ...this._refetchVariables
        }
        fragmentVariables = {
          ...fetchVariables,
          ...fragmentVariables
        }

        const cacheConfig = options
          ? { force: !!options.force }
          : undefined
        const request = getRequest(connectionConfig.query)
        const operation = createOperationDescriptor(request, fetchVariables)

        let refetchSubscription = null

        if (this._refetchSubscription) {
          this._refetchSubscription.unsubscribe()
        }
        this._hasFetched = true

        const onNext = (_, complete) => {
          const contextVariables = {
            ...this.props.__relayContext.variables,
            ...fragmentVariables
          }
          const prevData = this._resolver.resolve()
          this._resolver.setVariables(

getDerivedStateFromProps (nextProps, prevState) {
      if (
        prevState.prevQuery !== nextProps.query ||
        prevState.prevPropsEnvironment !== nextProps.environment ||
        !areEqual(prevState.prevPropsVariables, nextProps.variables)
      ) {
        const { query } = nextProps
        const prevSelectionReferences = prevState.queryFetcher.getSelectionReferences()
        prevState.queryFetcher.disposeRequest()

        let queryFetcher
        if (query) {
          const request = getRequest(query)
          const requestCacheKey = getRequestCacheKey(
            request.params,
            nextProps.variables
          )
          queryFetcher = requestCache[requestCacheKey]
            ? requestCache[requestCacheKey].queryFetcher
            : new VueRelayQueryFetcher(prevSelectionReferences)
        } else {
          queryFetcher = new VueRelayQueryFetcher(prevSelectionReferences)
        }
        return {
          prevQuery: nextProps.query,
          prevPropsEnvironment: nextProps.environment,
          prevPropsVariables: nextProps.variables,
          queryFetcher: queryFetcher,
          ...fetchQueryAndComputeStateFromProps(