React-apollo: flow typing with query + mutation

Created on 31 Oct 2017  路  6Comments  路  Source: apollographql/react-apollo

Intended outcome:

Figuring out how to properly flow-type a component with GraphQL queries + mutations.

Actual outcome:

Documentation says to use the OperationResult type, but it is not clear how to properly define a flow-type when a component has a query + a mutation. Looking into the flow types, it seems there is a MutationFunc type. Would the correct way to flow-type be to manually define a type with a mutate key and use the MutateFunc type, then create an intersection type to pass to OperationResult?

Example:

import type { OperationResult, MutationFunc, QueryProps } from 'react-apollo';

type Hero = {
  name: string,
  id: string,
  appearsIn: string[],
  friends: Hero[]
};

type Response = {
  hero: Hero
};

type Mutation = {
  mutate: MutationFunc<{SomeOtherFlowtypeForResult}>
};

type Props = {
  data: Response
} & QueryProps & Mutation;

const withCharacter: OperationComponent<Response, {}, Props> = graphql(HERO_QUERY, {
  options: ({ episode }) => ({
    variables: { episode }
  })
});

Apollo version 2.0

encouraged help-wanted

Most helpful comment

@green-arrow yeah sadly we haven't gotten around to adding back in flow types for the 2.0. I'd LOVE some help with this if anyone is able / interested. We need to convert the TS types to flow and included them in the bundle. Most of it can be copied from the 1.0 work but still needs to be done

All 6 comments

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

@green-arrow yeah sadly we haven't gotten around to adding back in flow types for the 2.0. I'd LOVE some help with this if anyone is able / interested. We need to convert the TS types to flow and included them in the bundle. Most of it can be copied from the 1.0 work but still needs to be done

So react-apollo basically has no real support for flow? I'm building an application that relies heavily on Apollo and a GraphQL API so if there's no real support (and attention) for flow that would be a real shame because typescript is not an option due to create-react-app.

What's the best way to know which types need to be added so people can contribute easily?

@TSMMark you can look at the test/flow-usage.js file and supplement it with usage samples, which would be used to validate the flow definitions. The flow definitions definitely need some attention, I merged a few fixes but they need more help.

React Apollo no longer provides official types definitions for Flow (we're all in on Typescript). You can still use community provided Flow definitions and libraries with RA, but we aren't maintaining any ourselves (due to the additional maintenance overhead). Thanks!

Was this page helpful?
0 / 5 - 0 ratings