How to use relay-runtime - 10 common examples

};

  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');

store,
  parentId,
  connectionName,
  edge,
  before = false,
}: IListRecord) {
  if (edge) {
    const parentProxy = store.get(parentId);
    if (!parentProxy) {
      // eslint-disable-next-line
      return console.warn(
        `The parentId (${parentId}), is not found in store, probably this is not a global field ID`,
      );
    }

    const conn = ConnectionHandler.getConnection(parentProxy, connectionName);
    // eslint-disable-next-line
    if (!conn) { return console.warn("The connection to update was not found."); }

    if (before) {
      ConnectionHandler.insertEdgeBefore(conn, edge);
    } else {
      ConnectionHandler.insertEdgeAfter(conn, edge);
    }
  }
}

const {
  Environment,
  Network,
  RecordSource,
  Store,
} = require('relay-runtime')
import '../global'

import { graphql, printSchema } from 'graphql'
import schema from '../graphql/relay-schema/index.js'

// console.log('schemmmas',printSchema(schema))

const store = new Store(new RecordSource())
const network = Network.create((operation, variables) =>
  graphql(schema, operation.text, null, {}, variables)
)

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

export default environment

const parentProxy = store.get(parentId);
    if (!parentProxy) {
      // eslint-disable-next-line
      return console.warn(
        `The parentId (${parentId}), is not found in store, probably this is not a global field ID`,
      );
    }

    const conn = ConnectionHandler.getConnection(parentProxy, connectionName);
    // eslint-disable-next-line
    if (!conn) { return console.warn("The connection to update was not found."); }

    if (before) {
      ConnectionHandler.insertEdgeBefore(conn, edge);
    } else {
      ConnectionHandler.insertEdgeAfter(conn, edge);
    }
  }
}

function sharedUpdater(store, user, todoProxy) {
  // In principle this could add to the active connection, but such an
  // interaction is not possible from the front end.
  const userProxy = store.get(user.id);
  const status = todoProxy.getValue('complete') ? 'active' : 'completed';
  const connection = ConnectionHandler.getConnection(
    userProxy, 'TodoList_todos', { status },
  );
  if (connection) {
    ConnectionHandler.deleteNode(connection, todoProxy.getValue('id'));
  }
}

import { Environment, Network, RecordSource, Store } from "relay-runtime";
import * as AbsintheSocket from "@absinthe/socket";
import { createSubscriber } from "@absinthe/socket-relay";
import { Socket as PhoenixSocket } from "phoenix";

export const tokenKey = "token";

const source = new RecordSource();
const store = new Store(source);
const fetchQueryFactory = (customHeaders = {}) => (operation, variables) =>
  fetch("/graphql", {
    method: "POST",
    headers: {
      ...customHeaders,
      "content-type": "application/json",
    },
    body: JSON.stringify({
      query: operation.text, // GraphQL text from input
      variables,
    }),
  }).then(response => {
    return response.json();
  });

variables,
  });
}

const network = new RelayNetworkLayer(
  [
    urlMiddleware({
      url: `${APP_BASE_PATH}/graphql`,
      credentials: 'same-origin',
    }),
    uploadMiddleware(),
  ],
  { subscribeFn: networkSubscriptions },
);

const store = new Store(new RecordSource());
// Activate the read from store then network
// store.holdGC();
export const environment = new Environment({
  network,
  store,
});

// Components
export class QueryRenderer extends Component {
  render() {
    const {
      variables, query, render, managedErrorTypes,
    } = this.props;
    return (

const createEnvironment = (
  records,
  fetchQuery = defaultFetchQuery,
  subscribe = defaultSubscribe
) => {
  const source = new Relay.RecordSource(records);
  const store = new Relay.Store(source);
  environment = new Relay.Environment({
    network:
      subscribe != null
        ? Relay.Network.create(fetchQuery, subscribe)
        : Relay.Network.create(fetchQuery),
    store,
  });
  // Debugging
  inspector =
    process.env.NODE_ENV !== 'production'
      ? new Relay.RecordSourceInspector(source)
      : null;
  return environment;
};

query: operation.text,
        variables,
      }),
    })).json();

    if (!jsonPayload.errors) {
      // always save the valid response (probably not needed during cache "force")
      await cache.set(query, variables, jsonPayload);
    }
    return jsonPayload;
  };

  return new PartialErrorsEnvironment(
    {
      network: Network.create(fetchQuery),
      store: new Store(new RecordSource()),
    },
    onPartialError,
  );
}

`ws${window.location.protocol === 'https:' ? 's' : ''}://${
      window.location.host
    }/graphql`,
    {
      reconnect: true,
    },
  );
  const subscriptionLink = new WebSocketLink(subscriptionClient);
  networkSubscriptions = (operation, variables) => execute(subscriptionLink, {
    query: operation.text,
    variables,
  });
}
export const environment = new Environment({
  network: Network.create(networkFetch, networkSubscriptions),
  store: new Store(new RecordSource()),
});

// Components
export class QueryRenderer extends Component {
  render() {
    const {
      variables, query, render, managedErrorTypes,
    } = this.props;
    return (
       {
          const { error } = data;
          const types = error ? map(e => e.name, error) : [];