apollo-map-props
We created three Higher Order Component (HOC) that wraps the Apollo Query and Mutation and Context component
Installation
install this package by running npm install apollo-map-props --save
Configuration
The default fetchPolicy for withQuery is cache-and-network
.
Add below code to index.js
for changing default fetchPolicy or adding other configs.
;withQuery
Usage
withQuery
A HOC that encapsulate the Query
apollo component and explicitly define two functions that will handle the query props and the result mapping to the Wrapped component.
Args
- mapProps - takes the incoming props and maps it onto the
Query
. This is where you'll put onquery
,variables
,skip
,fetchPolicy
, and anything else like that. - mapResultToProps - takes the result and props then maps them to the props the
View
component will expect.
Example
;; const mapProps = query variables: locationId skip: !locationId; const mapResultToProps = locations: _ isFetchingLocations: loading; const View = ConversationPageView;
withMutation
A HOC that encapsulate the Mutation
apollo component and explicitly define two functions that will handle the mutation props and the result mapping to the Wrapped component.
Args
- mapProps - takes the incoming props and maps it onto the
Mutation
. Generally you'll just be passing themutation
, and passing the rest manually to themutate
function, but you can pass anythingMutation
takes. - mapResultToProps - takes the mutate, result, and props then maps it to the props the
View
component will expect.
Example
;; const mapProps = mutation variables: id: conversationId optimisticResponse: __typename: 'Mutation' conversationUpdate: __typename: 'Conversation' id: conversationId read: true ; const mapResultToProps = markAsRead: mutate ; const View = ConversationView;
More complicated example
; const mapProps = mutation ; { const createMessage = { const optimisticResponse = ; // Update the conversation in the cache so it has the new message ; ; }; return createMessage ;} const View = ConversationView;