
Research
Two Malicious Rust Crates Impersonate Popular Logger to Steal Wallet Keys
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.
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 4,034 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.
Research
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.
Research
A malicious package uses a QR code as steganography in an innovative technique.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.