movie-search-nullcheck.jsx

import React from 'react';
import { Query } from 'react-apollo';

const MovieSearchResults = ({ keyword }) => (
  <Query query={SEARCH_MOVIES} variables={{ keyword }}>
    {(data, loading, error) => {
      if (loading) return <LoadingIndicator />;
      // if networkError is present, we can be sure that no data 
      // was returned. We can simply display an error component.
      if (error && error.networkError) return <ErrorDisplay />;
      return (
        <div>
          {data.movies ? 
            <MovieList movies={data.movies} /> 
            : <ErrorDisplay />
          }
          {data.recommendedForYou ? 
            <RecommendedMovieList movies={data.recommendedForYou} /> 
            : <ErrorDisplay />
          }
        </div>
      );
    }}
  </Query>
);