@kiwicom/relay/src/QueryRenderer.js

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = QueryRenderer;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireWildcard(require("react"));

var _reactRelay = require("react-relay");

var _js = require("@kiwicom/js");

var _fetch = require("@kiwicom/fetch");

var _createEnvironment = _interopRequireDefault(require("./createEnvironment"));

var _createNetworkFetcher = _interopRequireDefault(require("./fetchers/createNetworkFetcher"));

function QueryRenderer(props) {
  var _ref2, _props$environment;

  function renderQueryRendererResponse(_ref) {
    var error = _ref.error,
        rendererProps = _ref.props,
        retry = _ref.retry;

    if (error) {
      if (props.onSystemError) {
        return props.onSystemError({
          error: error,
          retry: retry
        });
      }

      var publicErrorMessage = 'Error!';

      if (error instanceof _fetch.TimeoutError) {
        publicErrorMessage = 'Timeout error!';
      } else if (error instanceof _fetch.ResponseError) {
        var response = error.response;
        publicErrorMessage = (0, _js.sprintf)('Unsuccessful response! (%s - %s)', response.status, response.statusText); // You can get the actual response here:
        // error.response.json().then(data => console.warn(data));
      }

      return _react.default.createElement("div", {
        "data-testid": "error"
      }, publicErrorMessage, ' ', _react.default.createElement("button", {
        type: "button",
        onClick: retry
      }, "Retry"));
    }

    if (!rendererProps) {
      return props.onLoading ? props.onLoading() : _react.default.createElement("div", {
        "data-testid": "loading"
      }, "Loading...");
    }

    !(props.onResponse !== undefined) ? process.env.NODE_ENV !== "production" ? (0, _js.invariant)(false, 'QueryRenderer used default render function but "onResponse" property has not been provided.') : (0, _js.invariant)(false) : void 0;
    return props.onResponse(rendererProps);
  }

  function createDefaultEnvironment(clientID) {
    !(clientID != null) ? process.env.NODE_ENV !== "production" ? (0, _js.invariant)(false, "You must provide 'clientID' to the QueryRenderer in order to correctly identify your client.") : (0, _js.invariant)(false) : void 0;
    var defaultResource = 'https://graphql.kiwi.com';
    return (0, _createEnvironment.default)({
      fetchFn: (0, _createNetworkFetcher.default)(defaultResource, {
        'X-Client': clientID
      }),
      graphiQLPrinter: function graphiQLPrinter(request, variables) {
        return "".concat(defaultResource, "/?query=").concat(encodeURIComponent(request.text), "&variables=").concat(encodeURIComponent(JSON.stringify(variables)));
      }
    });
  } // 1) <QR environment={Env} /> always win
  // 2) <QR /> checks whether we provide Environment via `RelayEnvironmentProvider`
  // 3) <QR /> defaults to the default Kiwi.com environment


  var context = (0, _react.useContext)(_reactRelay.ReactRelayContext);
  var environment = (_ref2 = (_props$environment = props.environment) !== null && _props$environment !== void 0 ? _props$environment : context === null || context === void 0 ? void 0 : context.environment) !== null && _ref2 !== void 0 ? _ref2 : createDefaultEnvironment(props.clientID); // Use this to disable store GC in order to reuse already existing data between screens:
  // const disposable = environment.getStore().holdGC();
  // Relay QR itself recreates the context with our environment.
  // Relay hooks are using `useRelayEnvironment` with `ReactRelayContext` inside (so we use it as well).

  return _react.default.createElement(_reactRelay.QueryRenderer, (0, _extends2.default)({
    environment: environment,
    render: renderQueryRendererResponse
  }, props));
}