refetch.ts

import {Mutation, Query} from "./graphql/queries"
import {graphql, OptionProps} from "react-apollo"
import {FetchPolicy} from "apollo-client"
import {ComponentClass, StatelessComponent} from "react"

type Component<P> = ComponentClass<P> | StatelessComponent<P>

interface RenderProps<Props, QueryResult, QueryArgs> {
  props: Props
  data: QueryResult | null
  loading: boolean
  refetch: ((x: QueryArgs) => Promise<QueryResult>) | null
}

export function graphqlQuery<Props, QueryArgs, QueryResult>({
  query,
  variables,
  fetchPolicy = "cache-first",
  render,
  skip = () => false,
}: {
  query: Query<QueryArgs, QueryResult>;
  variables: (x: Props) => QueryArgs;
  fetchPolicy?: FetchPolicy;
  skip?: (x: Props) => boolean;
  render: Component<RenderProps<Props, QueryResult, QueryArgs>>;
}): ComponentClass<Props> {
  return graphql<QueryResult, Props, RenderProps<Props, QueryResult, QueryArgs>>(query.document, {
    props({ownProps, data}) {
      return {
        props: ownProps,
        data: data || null,
        loading: !data || data.loading,
        refetch: data && data.refetch ? (x: QueryArgs) => data.refetch(x).then : null,
      }
    },
    options(props) {
      return {
        variables: variables(props),
        fetchPolicy,
      }
    },
    skip,
  })(render)
}