Iguazu Graphql
An Iguazu adapter for GraphQL data.
Want to get paid for your contributions to
iguazu-graphql
? Send your resume to oneamex.careers@aexp.com
Quick Setup
You will need to add the graphqlReducer
to your redux store (redux-thunk middleware is required):
;; const store = ;
You will also need to tell iguazu-graphql where your GraphQL endpoints are and give them names to reference later:
; ;
Deeper configuration is available and is explained in the "Detailed Configuration" section later on.
Advanced Setup
You may also supply a custom fetch
client to iguazu-graphql using Redux Thunk.
This will override any baseFetch
configuration in Iguazu GraphQL with the
thunk
supplied fetch client. (See Thunk withExtraArgument
docs)
;; /* Contrived custom fetch client */const customFetchClient = const store = ;
Implementing Container Components
Iguazu is designed to connect presentational components to the data they need via redux.
Iguazu has an established pattern for loading data and getting information about that data using an interface of dispatching actions to middleware added to the redux store. The iguazu middleware expects an object with properties of promise
, status
, error
, and finally data
:
/* MyContainer.jsx */;; { return { const data = pathtomyDataparam; const status = data ? 'complete' : 'loading'; const promise = data ? Promiseresolve : ; return data status promise ; }} => { if return <div>Loading...</div> if return <div>Oh no! Something went wrong</div> return <div>myData = myData</div>} { const dispatch = store; return } loadDataAsProps MyContainer;
Getting Data (Queries)
The iguazu-graphql adapter follows the same pattern, simply taking the place of queryMyData
. The queryGraphQLData
action creator handles the boilerplate of action forms (promise
, status
, error
, and data
properties) iguazu expects, while providing a convenient way to query a GraphQL schema/endpoint. The queryGraphQLData
action creator requires a query to send to the GraphQL server, and also accepts variables for that query.
/* MyContainer.jsx */;;; => { if return <div>Loading...</div> if return <div>Oh no! Something went wrong</div> return <div>myData = myData</div>} { const dispatch = store; const endpointName = 'example-endpoint'; const query = ` query ($someParam: String) { path(someParam: $someParam) { to { data } } } `; const variables = someParam: ownPropssomeParam ; return } loadDataAsProps MyContainer;
Changing Data (Mutations)
To change data on the server, use mutateGraphQLData
to send mutations. It is very similar to the queryGraphQLData
action creator, using a mutation instead of a query:
/* MyContainer.jsx */;;; const endpointName = 'sample-endpoint'; const QUERY_DATA = ` query ($someParam: String) { path(someParam: $someParam) { to { data } } }`; const MUTATE_DATA = ` mutation ($id: ID!) { removeTodo(someFunIdentifier: $id) { someFunIdentifier } }`; => { if return <div>Loading...</div> if return <div>Oh no! Something went wrong</div> return <div> <pre>myData = myData</pre> <button onClick= > Change the data </button> </div> ;} { const dispatch = store; const variables = someParam: ownPropssomeParam ; return } loadDataAsProps MyContainer;
Detailed Configuration
The fetch
option must return an object with a url
key, and optionally an opts
key of options for the fetch call (the second argument). Note that the fetch
option for the endpoint is given the redux state, allowing computation of the URL or other options that may be needed:
; ;
The iguazu-graphql adapter can be further configured via configureIguazuGraphQL
:
; ;
Note: The baseFetch
option is overriden if fetchClient
is set with Redux
Thunk's withExtraArgument. (See Advanced Setup for details)
Example: different state location
If you have a different place you want to put the query cache, you can put the reducer in that location in the redux pattern and then tell iguazu-graphql where that is via the getToState
key to configureIguazuGraphQL
:
;; const store = ; ;
Contributing
We welcome Your interest in the American Express Open Source Community on Github. Any Contributor to any Open Source Project managed by the American Express Open Source Community must accept and sign an Agreement indicating agreement to the terms below. Except for the rights granted in this Agreement to American Express and to recipients of software distributed by American Express, You reserve all right, title, and interest, if any, in and to Your Contributions. Please fill out the Agreement.
Please feel free to open pull requests and see CONTRIBUTING.md for commit formatting details.
License
Any contributions made under this project will be governed by the Apache License 2.0.
Code of Conduct
This project adheres to the American Express Community Guidelines. By participating, you are expected to honor these guidelines.