<commit_before>// @flow

import * as React from 'react'

import { Button } from '@mattailes/ui'
import { Query } from 'react-apollo'
import type { Film } from '@mattailes/types'

import gql from 'graphql-tag'

const query = gql`
  {
    getAllFilms {
      title
      producer
    }
  }
`

const QueryPage = () => (
  <Query query={query} notifyOnNetworkStatusChange>
    {({
      loading, error, data, refetch, networkStatus,
    }) => {
      if (networkStatus === 4) {
        return <p>Refetching.......</p>
      }
      if (loading) {
        return <p>Loading.......</p>
      }

      if (error) {
        return (
          <p>
OMG ERROR -
            {error.message}
          </p>
        )
      }

      return [
        <div>
          {data.getAllFilms.map((film: Film) => (
            <p key={film.episode_id}>
              {film.title}
              {' - '}
              {film.producer}
            </p>
          ))}
        </div>,
        <Button primary onClick={() => refetch()}>
          Refetch!
        </Button>,
      ]
    }}
  </Query>
)

export default QueryPage<commit_msg>🚧 adding in typing that sorta works<commit_after>// @flow

import * as React from 'react'

import { Button } from '@mattailes/ui'
import { graphql } from 'react-apollo'
import type { Film } from '@mattailes/types'
import type { OperationComponent } from 'react-apollo'

import gql from 'graphql-tag'

const FILM_QUERY = gql`
  query {
    getAllFilms {
      title
      producer
      episode_id
    }
  }
`

type Response = {
  getAllFilms?: Array<Film>
}

const withFilmQuery: OperationComponent<Response> = graphql(FILM_QUERY, {
  options: {
    notifyOnNetworkStatusChange: true,
  },
})

const FilmQueryComponent = withFilmQuery(
  ({
    data: {
      loading, error, getAllFilms, refetch, networkStatus,
    },
  }) => {
    if (networkStatus === 4) {
      return <p>Refetching.........</p>
    }

    if (loading) {
      return <p>Loading............</p>
    }

    if (error || !getAllFilms) {
      return <p>Error.............</p>
    }

    return (
      <div>
        {getAllFilms.map(film => (
          <p key={film.episode_id}>
            {film.title}
            {' '}
-
            {film.producer}
          </p>
        ))}
        <Button primary onClick={() => refetch()}>
          Refetch!
        </Button>
      </div>
    )
  },
)

export default FilmQueryComponent
{'fraction_non_alphanumeric': 0.15627597672485452, 'fraction_numerical': 0.0008312551953449709, 'mean_word_length': 1.7540045766590389, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 38, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7243384', 'n_tokens_mistral': 798, 'n_tokens_neox': 783, 'n_words': 171}