react.js

gistfile1.js

import React from 'react';
import { Subscription } from 'react-apollo';
import gql from 'graphql-tag';

const ConvertScreen = () => {
  const urlParams = new URLSearchParams(window.location.search);
  const id = urlParams.get('id');

  return (
    <Subscription
      subscription={
        gql`
          subscription ($id: Int) {
            images (
              where: {
                id: {
                  _eq: $id
                }
              }
            ) {
              id
              image_uri
              converted_image_uri
            }
          }
        `
      }
      variables={{id}}
    >
      {
        ({data, error, loading}) => {
          if (error) { console.error(error); return <ErrorScreen /> }
          if (loading) return <LoadingScreen />;
          if (data.images.length === 0) {
            return "Invalid image ID";
          }
          if (!data.images[0].converted_image_uri) {
            return <LoadingScreen />
          }
          return (
            <ImageScreen
              original={data.images[0].image_uri}
              converted={data.images[0].converted_image_uri}
            />
          );
        }
      }

    </Subscription>
  )
}