React-apollo: Flow and React-Apollo: Type-Checking not working?

[rahulthewall]

I am following the guide here: https://www.apollographql.com/docs/react/features/static-typing.html

My GraphQL query:

// @flow

import gql from 'graphql-tag';

const businessListQuery = gql`
  query getBusinessList($sort: String, $offset: Int, $limit: Int, $filter: String) {
    businesses(sort: $sort, offset: $offset, limit: $limit, filter: $filter) {
      list {
        id
        name
      }
    }
  }
`;

export { businessListQuery };

Types:

// @flow
export type Business = {
  name: string,
  id: string,
};

export type Businesses = {
  list: Array<Business>,
}


export type Response = {
  businesses: Businesses,
};

The GraphQL Component (Function as a Child)

// @flow

import React from 'react';
import { graphql } from 'react-apollo';
import type { OperationComponent, QueryProps } from 'react-apollo';
import { businessListQuery } from './businessListQuery';
import type { Response } from './types';

type Props = {
  data: QueryProps & Response,
  children: any,
};


const Businesses = ({ data: { loading, error, businesses }, children }: Props) => {
  if (loading) {
    return <p>Loading ...</p>;
  }
  if (error) {
    return <p>{error.message}</p>;
  }
  return (
    children(businesses.list)
  );
};

const BusinessListProps: OperationComponent<Response, Props> = graphql(businessListQuery)(Businesses);

export { BusinessListProps };

I use the FAC in the following manner

// @flow

import React from 'react';
import { Table, HeaderRow, HeaderColumn, Content, Row, Column } from '@r3pi/dg2-web-shared-components';
import { BusinessListProps } from '../graphql/BusinessListProps';

const renderBusinesses = business => {
  return (
    <Row key={business.id}>
      <Column>{business.id}</Column>
      <Column>{business.name}</Column>
    </Row>
  );
};

const BusinessList = () => {
  return (
    <BusinessListProps>
      {(businesses) => (
        <Table>
          <HeaderRow>
            <HeaderColumn>ID</HeaderColumn>
            <HeaderColumn>Name</HeaderColumn>
          </HeaderRow>
          <Content items={businesses} renderItem={renderBusinesses} />
        </Table>
      )}
    </BusinessListProps>
  );
};

export { BusinessList };

However, I get a bunch of flow errors with this setup: https://pastebin.com/QxdCWghU

I followed a suggestion on #1105 and added the following to my .flowconfig

[libs]
node_modules/react-apollo/index.js.flow
node_modules/react-apollo/react-apollo.umd.js.flow

However, this results in flow not working at all. The following, with this setup, does not report an error

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

Could someone please guide me on how to setup

[rosskevin]

The flow implementation and documentation needs to be updated by the community. Please feel free to dig in and submit PRs.

[dleitee]

@rosskevin Can I do that?

[rosskevin]

Sure feel free @dleitee

[baransu]

Is there any progress in this matter? I'm testing GraphQL and static typing using flow is extremely important for me. If there is need for that I could try to help although I don't have prior experience with GraphQL or Apollo.

[baransu]

~In my case - very simple queries without mutations I've managed to fix my flow errors by removing props method from graphql function mentioned in https://www.apollographql.com/docs/react/features/static-typing.html#props.~

~ChildProps type specifies all HOC props in data property and doing ({ data }) => ({ ...data }) changes our properties so props type is wrong. From what I understand the problem lies in any type specified here: https://github.com/apollographql/react-apollo/blob/master/src/index.js.flow#L101 and probably using some generic type we could enforce providing correct props type in our component. Maybe passing down TChildProps to OperationOption (https://github.com/apollographql/react-apollo/blob/master/src/index.js.flow#L121) and using it instead of any could help.~

EDIT: After checking more docs and more type declarations in the source my previous assumptions may be wrong but I want to leave it as it can be helpful to someone else going through the same as I did 😃.

[hwillson]

Flow is no longer supported with React Apollo. Thanks!

[cbrunnkvist]

Thanks @hwillson for clarifying. But does anyone know the rationale behind _"Flow is no longer supported with React Apollo"_?

[hwillson]

@cbrunnkvist Sure thing - the Apollo team is moving towards 100% Typescript use for all projects. Because of this, Flow support isn't something that's being maintained internally, which means for it to be included, it would fall entirely on the Apollo community to manage. The problem with this approach though is that the vast majority of the Apollo community is using Typescript instead of Flow, which means as React Apollo changes and progresses, Flow support lags behind pretty significantly. For this reason, we've decided to drop Flow support entirely. If the Flow vs. Typescript table turns in Flow's favour in the future, we'll definitely reconsider, but for now that's the plan. Thanks!

[cbrunnkvist]

Alright, I see how that makes sense then. 👍

On a side note: I'm not using much of either Flow or TS so far -only as an "opt-in" type checker for the most hairy modules- but just in order to get _one_ particular of my files working (the one which happens to include a gql call) I wonder if it wouldn't be possible to hook up some sort of converter (a quick search came up with: https://github.com/joarwilk/flowgen) so I'm gonna try that. _If_ that approach turns out to have good results and be trivial to set up, would that be something you would consider adding as a publish build step?