apollo-flow-components
Command-line tool to generate ready-to-use react-apollo flow typed Query and Mutation components. Utilizes type output from apollo-cli
Usage
# Use apollo-cli to get schema definition from graphql server $ apollo schema:download --endpoint=http://localhost:3001/graphql schema.json # Generate flow types from queries.graphql files $ apollo codegen:generate --addTypename --schema=schema.json --target=flow src/types.js # Generate components utilizing generated flow types $ apollo-flow-components
A corresponding ApolloComps.js file will be generated next to each queries.graphql file, with one Query/Mutation component export for each operation defined in queries.graphql. The components automatically will have type-safety with the generated types and also will automatically pass down the query/mutation DocumentNode.
Assumptions
The generated files make some assumptions about how the consuming project is structured.
- query and mutation operations are defined in queries.graphql files
- The types generated from apollo-cli are accessible via
import type { ... } from "types"
. To allow this:module.system.node.resolve_dirname=./src
in .flowconfig options- output generated types to
src/types/apolloTypes.js
, and then re-export them out ofsrc/types/index.js
usingexport type *
Example Output
Given a queries.graphql file:
query GetList( $first: Int! $after: String) { list( first: $first after: $after ) { pageInfo { totalCount } }} mutation DeleteItem($input: DeleteItemInput!) { deleteItem(input: $input) { success }}
apollo-flow-components will generate this ApolloComps.js file in the same directory:
/* DO NOT EDIT Generated using apollo-flow-components */// @flow;;; <GetListType GetListVariables> {};<DeleteItemType DeleteItemVariables> {}; const GetListQuery = <GetListQueryClass query=GetList ...props />;const DeleteItemMutation = <DeleteItemMutationClass mutation=DeleteItem ...props />;
Then, to utilize the components,
const Comp = <GetListQuery variables= first: 10 > ... </GetListQuery>