Apollo and Redux Tools
This set of helpers facilitates the use of GraphQL and Apollo with your React/Redux application.
It allows you to:
- Define queries and mutations using object notation for better code clarity
- Copy query results to redux store for easier optimistic callbacks
- Use higer order elements to display messages based on query easier
Server
The server functionality has been moved to: apollo-modules
Client
Client helpers exists in the apollo-mantra
module and focus on easy integration of apollo in redux projects.
Following is a list of helpers:
Query and Mutation Helpers
These helpers provide a possibility to define queries and mutations in object format, which facilitates the code readibility. Following is the structure of the query.
interface IQuery query: string; variables?: Object; pollInterval: number; // watch query only returnPartialData: boolean; // watch query only forceFetch: boolean; optimisticCallback?: dispatch: Function any void; thenCallback?: data: any dispatch: Function any void; errorCallback?: errors: any dispatch: Function any void; catchCallback?: error: any dispatch: Function any void; finalCallback?: dispatch: Function any void;
query(query: IQuery): void
create query using object definitionwatchQuery(query: IQuery): void
create watch query using object definiton and return an observermutation(query: IQuery): void
create mutation using object definition
The query returns an action that should be dispatched via redux store, watchQuery returns an observer.
Application Helpers
createApp(context: any, options: IOptions): any
create a new apollo based application and expose context into all redux and apollo function calls
Container Helpers
connect<T>(funcs: IConnectFunctions): (component: any) => React.StatelessComponent<T>
use as standard redux or apollo connect function, but all realted functions will now have application context as their first parameter:mapStateToProps(context: any, state: any, ownProps: any): void
mapDispatchToProps(context: any, dispatch: any, ownProps: any): void
mergeProps(context: any, state: any, ownProps: any): void
mapQueriesToProps(context: any, props: any): void
mapMutationsToProps(context: any, props: any): void
loadingContainer(component: any, keys?: string[]): any
higher order component that shows a loading control while queries are loadingloadingContainer(component: any, loading?: any, keys?: string[]): any
higher order component that shows a loading control while queries are loadingqueriesFinished(state: IApolloState): boolean
decides whether all queries currently finished loading
Reducer Helpers
Please see the reducer example.
copyQuery(state: Object, stateKey: string, queryResult: Object[], queryKey?: string, overwrite?: boolean): Object
copies a query result into the storeisQuery(action: any, queryName: string): boolean
checks whether a given action represent a query call with a given namegetQuery<T>(action: any): string
obtains a result of a query with a specified nameisMutation(action: any, queryName: string): boolean
checks whether a given action represent a query call with a given namegetMutation<T>(action: any): string
obtains a result of a mutation with a specified name
Examples
List of examples of common uses of our helpers
Reducer
This is how you can copy apollo query results to the store.
;; ;} { // when we execute a specific query, we want to copy its values nto the store return state;}
Calling a query or a mutation
; dispatchmutation;