
Security News
/Research
Wallet-Draining npm Package Impersonates Nodemailer to Hijack Crypto Transactions
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
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 7,997 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
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.