How to use react-relay-network-modern - 10 common examples

relaySSRMiddleware.debug = false

  const network = new RelayNetworkLayer([
    relaySSRMiddleware.getMiddleware({
      lookup: true,
    }),
    cacheMiddleware({
      size: 100, // max 100 requests
      ttl: 900000, // 15 minutes
      onInit: cache => {
        // TODO: Handle this cache
        // console.log(cache)
      },
    }),
    urlMiddleware({
      url: process.env.METAPHYSICS_BASE_URL,
    }),
    // loggerMiddleware(),
  ])

  const source = new RecordSource()
  const store = new Store(source)
  const environment = new Environment({
    network,
    store,
  })
  environment.relaySSRMiddleware = relaySSRMiddleware

  return environment
}

_createRelayNetworkLayer() {
    return new RelayNetworkLayer(
      [
        // batchMiddleware({
        //   batchUrl: '/graphql/batch',
        //   batchTimeout: 20,
        // }),
        cacheMiddleware({
          size: 100,
          ttl: 15 * 60 * 1000, // 15 minutes
          onInit: cache => (this._cache = cache),
        }),
        urlMiddleware({
          url: this.endpoint,
        }),
        __DEV__ ? loggerMiddleware() : null,
        // __DEV__ ? perfMiddleware() : null,
        !__DEV__
          ? retryMiddleware({
              // [3200, 6400, 12800, 25600, 51200, 102400, 204800, 409600, ...],
              retryDelays: attempt => 2 ** (attempt + 4) * 100,
              forceRetry: (cb, delay) => {
                window.forceRelayRetry = cb;
                // eslint-disable-next-line
                console.log(`call 'forceRelayRetry()' for immediately retry! Or wait ${delay} ms.`);
              },
            })
          : null,
        __DEV__ ? gqlErrorsMiddleware() : null,

export function getRelayEnvironment(records) {
  // if (environment && resolver) {
  //   return {
  //     environment,
  //     resolver,
  //   }
  // }

  const relaySSRMiddleware =
    typeof window === 'undefined'
      ? new RelayServerSSR()
      : new RelayClientSSR(window.relayData)

  const network = new RelayNetworkLayer([
    relaySSRMiddleware.getMiddleware(),
    urlMiddleware({ url: process.env.METAPHYSICS_BASE_URL }),
    // next => async req => {
    //   const res = await next(req)
    //   // Store SSR payloads here
    //   console.log(await RelayResponse.createFromFetch(res))
    //   // console.log('RelayResponse', res)
    // },
    // relayServerSSR.getMiddleware({
    //   schema,
    //   contextValue: {},
    // }),
    // loggerMiddleware(),
    // gqlErrorsMiddleware({
    //   disableServerMiddlewareTip: true,
    // }),
    // perfMiddleware(),
  ])

* See https://bugs.chromium.org/p/chromium/issues/detail?id=571722
     */
    "User-Agent": USER_AGENT,
  }

  let timeZone
  try {
    timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
    headers["X-TIMEZONE"] = timeZone
  } catch (error) {
    console.warn("Browser does not support i18n API, not setting TZ header.")
  }

  const network =
    relayNetwork ||
    new RelayNetworkLayer([
      // TODO: Better introspection around if this is a SearchBar query,
      // or further refactoring to extract `addMiddlewareToEnvironment(environment)`,
      // to be used in the SearchBar QueryRenderer (for example).
      next => req => {
        if (req.id === "SearchBarSuggestQuery" && req.variables.term === "")
          return Promise.resolve({ data: { viewer: {} } })
        return next(req)
      },
      urlMiddleware({
        url: METAPHYSICS_ENDPOINT,
        headers: !!user
          ? {
              ...headers,
              "X-USER-ID": user && user.id,
              "X-ACCESS-TOKEN": user && user.accessToken,
            }

export function createRelayEnvironment(cache) {
  const isServer = typeof window === 'undefined'

  const relaySSRMiddleware = isServer
    ? new RelayServerSSR()
    : new RelayClientSSR(cache) // eslint-disable-line

  relaySSRMiddleware.debug = false

  const network = new RelayNetworkLayer([
    relaySSRMiddleware.getMiddleware({
      lookup: true,
    }),
    cacheMiddleware({
      size: 100, // max 100 requests
      ttl: 900000, // 15 minutes
      onInit: cache => {
        // TODO: Handle this cache
        // console.log(cache)
      },
    }),
    urlMiddleware({
      url: process.env.METAPHYSICS_BASE_URL,
    }),
    // loggerMiddleware(),
  ])

  const source = new RecordSource()
  const store = new Store(source)
  const environment = new Environment({

url: this.endpoint,
        }),
        __DEV__ ? loggerMiddleware() : null,
        // __DEV__ ? perfMiddleware() : null,
        !__DEV__
          ? retryMiddleware({
              // [3200, 6400, 12800, 25600, 51200, 102400, 204800, 409600, ...],
              retryDelays: attempt => 2 ** (attempt + 4) * 100,
              forceRetry: (cb, delay) => {
                window.forceRelayRetry = cb;
                // eslint-disable-next-line
                console.log(`call 'forceRelayRetry()' for immediately retry! Or wait ${delay} ms.`);
              },
            })
          : null,
        __DEV__ ? gqlErrorsMiddleware() : null,
      ].filter(o => !!o)
    );
  }

_createRelayNetworkLayer() {
    return new RelayNetworkLayer(
      [
        // batchMiddleware({
        //   batchUrl: '/graphql/batch',
        //   batchTimeout: 20,
        // }),
        cacheMiddleware({
          size: 100,
          ttl: 15 * 60 * 1000, // 15 minutes
          onInit: cache => (this._cache = cache),
        }),
        urlMiddleware({
          url: this.endpoint,
        }),
        __DEV__ ? loggerMiddleware() : null,
        // __DEV__ ? perfMiddleware() : null,
        !__DEV__
          ? retryMiddleware({
              // [3200, 6400, 12800, 25600, 51200, 102400, 204800, 409600, ...],
              retryDelays: attempt => 2 ** (attempt + 4) * 100,
              forceRetry: (cb, delay) => {
                window.forceRelayRetry = cb;
                // eslint-disable-next-line
                console.log(`call 'forceRelayRetry()' for immediately retry! Or wait ${delay} ms.`);
              },
            })
          : null,
        __DEV__ ? gqlErrorsMiddleware() : null,
      ].filter(o => !!o)
    );
  }

// batchMiddleware({
        //   batchUrl: '/graphql/batch',
        //   batchTimeout: 20,
        // }),
        cacheMiddleware({
          size: 100,
          ttl: 15 * 60 * 1000, // 15 minutes
          onInit: cache => (this._cache = cache),
        }),
        urlMiddleware({
          url: this.endpoint,
        }),
        __DEV__ ? loggerMiddleware() : null,
        // __DEV__ ? perfMiddleware() : null,
        !__DEV__
          ? retryMiddleware({
              // [3200, 6400, 12800, 25600, 51200, 102400, 204800, 409600, ...],
              retryDelays: attempt => 2 ** (attempt + 4) * 100,
              forceRetry: (cb, delay) => {
                window.forceRelayRetry = cb;
                // eslint-disable-next-line
                console.log(`call 'forceRelayRetry()' for immediately retry! Or wait ${delay} ms.`);
              },
            })
          : null,
        __DEV__ ? gqlErrorsMiddleware() : null,
      ].filter(o => !!o)
    );
  }

} catch (error) {
    console.warn("Browser does not support i18n API, not setting TZ header.")
  }

  const network =
    relayNetwork ||
    new RelayNetworkLayer([
      // TODO: Better introspection around if this is a SearchBar query,
      // or further refactoring to extract `addMiddlewareToEnvironment(environment)`,
      // to be used in the SearchBar QueryRenderer (for example).
      next => req => {
        if (req.id === "SearchBarSuggestQuery" && req.variables.term === "")
          return Promise.resolve({ data: { viewer: {} } })
        return next(req)
      },
      urlMiddleware({
        url: METAPHYSICS_ENDPOINT,
        headers: !!user
          ? {
              ...headers,
              "X-USER-ID": user && user.id,
              "X-ACCESS-TOKEN": user && user.accessToken,
            }
          : headers,
      }),
      relaySSRMiddleware.getMiddleware(),
      cacheMiddleware({
        size: 100, // max 100 requests
        ttl: 900000, // 15 minutes
        onInit: queryResponseCache => {
          if (!isServer) {
            hydrateCacheFromSSR(queryResponseCache)

_createRelayNetworkLayer() {
    return new RelayNetworkLayer(
      [
        // batchMiddleware({
        //   batchUrl: '/graphql/batch',
        //   batchTimeout: 20,
        // }),
        cacheMiddleware({
          size: 100,
          ttl: 15 * 60 * 1000, // 15 minutes
          onInit: cache => (this._cache = cache),
        }),
        urlMiddleware({
          url: this.endpoint,
        }),
        __DEV__ ? loggerMiddleware() : null,
        // __DEV__ ? perfMiddleware() : null,
        !__DEV__