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

};

  const complete = request => {
    getRequests(request).forEach(foundRequest => foundRequest.sink.complete());
  };

  const resolve = (request, payload) => {
    getRequests(request).forEach(foundRequest => {
      const {sink} = foundRequest;
      sink.next(ensureValidPayload(payload));
      sink.complete();
    });
  };

  // Mock instance
  const environment = new Environment({
    configName: 'RelayModernMockEnvironment',
    handlerProvider,
    network: Network.create(execute, execute),
    store,
  });
  // Mock all the functions with their original behavior
  mockDisposableMethod(environment, 'applyUpdate');
  mockInstanceMethod(environment, 'commitPayload');
  mockInstanceMethod(environment, 'getStore');
  mockInstanceMethod(environment, 'lookup');
  mockInstanceMethod(environment, 'check');
  mockDisposableMethod(environment, 'subscribe');
  mockDisposableMethod(environment, 'retain');
  mockObservableMethod(environment, 'execute');
  mockObservableMethod(environment, 'executeMutation');

_createRelayEnv() {
    const source = new RecordSource();
    const store = new Store(source);
    const network = this._createRelayNetworkLayer();
    this._relayEnv = new Environment({ network, store });
    this.unstable_internal = this._relayEnv.unstable_internal; // Relay Compat
  }

// Create a network layer from the fetch function
  const network = Network.create(fetchQuery)
  const store = new Store(new RecordSource(records))

  // Make sure to create a new Relay environment for every server-side request so that data
  // isn't shared between connections (which would be bad)
  if (typeof window === 'undefined') {
    return new Environment({
      network,
      store,
    })
  }

  // reuse Relay environment on client-side
  if (!relayEnvironment) {
    relayEnvironment = new Environment({
      network,
      store,
    })
  }

  return relayEnvironment
}

// },
    // relayServerSSR.getMiddleware({
    //   schema,
    //   contextValue: {},
    // }),
    // loggerMiddleware(),
    // gqlErrorsMiddleware({
    //   disableServerMiddlewareTip: true,
    // }),
    // perfMiddleware(),
  ])

  const source = new RecordSource(records)
  const store = new Store(source)

  environment = new Environment({
    network,
    store,
  })

  resolver = new Resolver(environment)

  return {
    environment,
    resolver,
    relaySSRMiddleware,
  }
}

const schema = loadSchema(
      params.network.projectName,
      params.network.resolvers || {},
      { requireResolversForResolveType: false }
    );
    network = Network.create(
      wrapFetchWithLogger(createFetch({ schema }), {
        logResult: params.network.logNetwork,
        muteErrors: params.network.muteNetworkErrors,
      }),
      params.network.subscriptionHandler
        ? (createSubscribe(params.network.subscriptionHandler) as any)
        : undefined
    );
  }
  const environment = new Environment({
    network,
    store: new Store(params.source || new RecordSource()),
  });
  if (params.initLocalState !== false) {
    commitLocalUpdate(environment, sourceProxy => {
      const root = sourceProxy.getRoot();
      const localRecord = createAndRetain(
        environment,
        sourceProxy,
        LOCAL_ID,
        LOCAL_TYPE
      );
      root.setLinkedRecord(localRecord, "local");
      if (typeof params.initLocalState === "function") {
        params.initLocalState(localRecord, sourceProxy, environment);
      }

) {
  return fetch('/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      query: operation.text,
      variables,
    }),
  }).then(response => {
    return response.json();
  });
}

const modernEnvironment = new Environment({
  network: Network.create(fetchQuery),
  store: new Store(new RecordSource()),
});

ReactDOM.render(
  
    environment={modernEnvironment}
    query={graphql`
      query appQuery {
        viewer {
          ...TodoApp_viewer
        }
      }
    `}
    variables={{}}
    render={({error, props}) => {

function fetchQuery(operation, variables) {
    return fetch("/graphql", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            query: operation.text,
            variables
        })
    }).then(response => {
        return response.json();
    });
}

const modernEnvironment = new Environment({
    network: Network.create(fetchQuery),
    store: new Store(new RecordSource())
});

/**
 * Listens for navigation events and renders the root of Relay tree. It fetches
 * the data specified with the query in the state and renders the Component on
 * render callback.
 */
stateNavigator.onNavigate((oldState, state, data) => {
    var Component = state.component;
    ReactDOM.render(

export const initEnvironment = ({ records = {} } = {}) => {
  const network = Network.create(fetchQuery);
  const store = new Store(new RecordSource(records));

  if (!process.browser) {
    return new Environment({
      network,
      store
    });
  }

  if (!environment) {
    environment = new Environment({
      network,
      store
    });
  }

  return environment;
};

import { RelayProp } from "react-relay"
import { Environment, Network, RecordSource, Store } from "relay-runtime"

interface Props {
  relay?: RelayProp
}

export class RelayStubProvider extends Component {
  static propTypes = {
    children: PropTypes.node.isRequired,
    relay: PropTypes.object,
  }

  static defaultProps = {
    relay: {
      environment: new Environment({
        network: Network.create(x => x),
        store: new Store(new RecordSource()),
      }),
      variables: {},
    },
  }

  static childContextTypes = {
    relay: PropTypes.object.isRequired,
  }

  getChildContext() {
    return {
      relay: this.props.relay,
    }
  }