
Security News
ECMAScript 2025 Finalized with Iterator Helpers, Set Methods, RegExp.escape, and More
ECMAScript 2025 introduces Iterator Helpers, Set methods, JSON modules, and more in its latest spec update approved by Ecma in June 2025.
apollo-map-props
Advanced tools
We created three Higher Order Component (HOC) that wraps the Apollo Query and Mutation and Context component
install this package by running npm install apollo-map-props --save
The default fetchPolicy for withQuery is cache-and-network
.
Add below code to index.js
for changing default fetchPolicy or adding other configs.
import { withQuery } from 'apollo-map-props';
withQuery.setConfig({ fetchPolicy: 'network-only' })
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.
Query
. This is where you'll put on query
, variables
, skip
, fetchPolicy
, and anything else like that.View
component will expect.Example
import { withQuery } from 'apollo-map-props';
import query from 'apollo/queries/locationsQuery';
const mapProps = ({ locationId }) => ({
query,
variables: { locationId },
skip: !locationId
});
const mapResultToProps = ({ data, loading }, _props) => ({
locations: _.get(data, 'locationsAll'),
isFetchingLocations: loading
});
const View = withQuery(mapProps, mapResultToProps)(ConversationPageView);
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.
Mutation
. Generally you'll just be passing the mutation
, and passing the rest manually to the mutate
function, but you can pass anything Mutation
takes.View
component will expect.Example
import { withMutation } from 'apollo-map-props';
import mutation from 'apollo/mutations/markAsReadMutation';
const mapProps = ({ conversationId }) => ({
mutation,
variables: { id: conversationId },
optimisticResponse: {
__typename: 'Mutation',
conversationUpdate: { __typename: 'Conversation', id: conversationId, read: true }
}
});
const mapResultToProps = (mutate, _result, _props) => ({ markAsRead: mutate });
const View = withMutation(mapProps, mapResultToProps)(ConversationView);
More complicated example
import mutation from 'apollo/mutations/createMessageMutation';
const mapProps = () => ({ mutation });
function mapResultToProps(mutate, { client }, props) {
const createMessage = attrs => {
const optimisticResponse = createMessageOptimisticResponse({
...attrs,
userId: props.currentUser.id,
attachments: []
});
// Update the conversation in the cache so it has the new message
updateConversationCache(client, props, (conversation, items) => {
const message = optimisticResponse.message;
conversation.lastItem = message;
const conversationItems = [...items, message];
return { conversation, conversationItems };
});
mutate({ variables: attrs, optimisticResponse })
.then(props.refetchConversations)
.catch(result => {
// Remove the new message from the cached conversation since it failed
updateConversationCache(client, props, (conversation, items) => {
const message = optimisticResponse.message;
const conversationItems = _.reject(items, { id: message.id });
conversation.lastItem = _.last(conversationItems);
return { conversation, conversationItems };
});
});
};
return { createMessage };
}
const View = withCreateMessageMutation(mapProps, mapResultToProps)(ConversationView);
FAQs
To help with props mapping when using apollo with React
The npm package apollo-map-props receives a total of 6,177 weekly downloads. As such, apollo-map-props popularity was classified as popular.
We found that apollo-map-props demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 134 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ECMAScript 2025 introduces Iterator Helpers, Set methods, JSON modules, and more in its latest spec update approved by Ecma in June 2025.
Security News
A new Node.js homepage button linking to paid support for EOL versions has sparked a heated discussion among contributors and the wider community.
Research
North Korean threat actors linked to the Contagious Interview campaign return with 35 new malicious npm packages using a stealthy multi-stage malware loader.