![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
apollo-map-props
Advanced tools
Readme
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 4,742 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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.