@kiwicom/smart-faq/src/shared/relay/QueryRenderer.js

// @flow

import * as React from 'react';
// TODO: replace by React.memo when updating to React 16.6
import memoize from 'memoize-one';
import { QueryRenderer as OriginalQueryRenderer } from 'react-relay';

import createEnvironment from './environment';
import { fromLanguageToLocale } from '../helpers/translationUtils';
import SSRContext from '../ssr/SSRContext';
import { isBrowser } from '../helpers';

type RenderArgs<RenderProps> = {
  error: ?Error,
  props: ?RenderProps,
};

export type Props<RenderProps> = {|
  cacheConfig?: {| force: boolean |},
  query: () => mixed,
  render: (RenderArgs<RenderProps>) => React.Node,
  variables?: { [string]: mixed },
  loginToken?: ?string,
  kwAuthToken?: ?string,
  language: string,
|};

class QueryRenderer<RenderProps> extends React.Component<Props<RenderProps>> {
  getEnvironment = memoize(
    (loginToken: ?string, kwAuthToken: ?string, locale: string) =>
      createEnvironment(loginToken, kwAuthToken, locale),
  );

  fetchSSRData = () => {
    return {
      query: this.props.query,
      variables: this.props.variables,
    };
  };

  renderNormalQueryRenderer() {
    const { loginToken, kwAuthToken } = this.props;
    const locale = fromLanguageToLocale(this.props.language);
    const newEnvironment = this.getEnvironment(loginToken, kwAuthToken, locale);

    return (
      <OriginalQueryRenderer
        query={this.props.query}
        variables={this.props.variables}
        cacheConfig={this.props.cacheConfig}
        render={this.props.render}
        environment={newEnvironment}
      />
    );
  }

  render() {
    return (
      <SSRContext.Consumer>
        {context =>
          context && context.data && !isBrowser()
            ? this.props.render({
                props: context.data,
                error: null,
                retry: null,
              })
            : this.renderNormalQueryRenderer()
        }
      </SSRContext.Consumer>
    );
  }
}

export default QueryRenderer;