React Apollo Snippets
This plugin is sponsored by Level Up Tutorials
Installation
- Open the extensions sidebar on Visual Studio Code
- Search for React Apollo Snipets
- Click Install to install it.
- Click Reload to reload the your editor
- Enjoy
Snippets
Imports
| prefix |
snippet |
| iap |
import { ApolloProvider } from 'react-apollo'; |
| iaq |
import { Query } from 'react-apollo'; |
| iam |
import { Mutation } from 'react-apollo'; |
| iaqm |
import { Query, Mutation } from 'react-apollo'; |
| iac |
import { ApolloConsumer } from 'react-apollo'; |
Components
aq
Apollo Query Simple
<Query query={QUERY_CONST}>
{({ data }) => (
{data}
)}
</Query>
aqf
Apollo Query Full
<Query query={QUERY_CONST}>
{({ loading, error, data }) => {
if (loading) return "Loading...";
if (error) return `Error! ${error.message}`;
return (
{data}
);
}}
</Query>
am
Apollo Mutation Simple
<Mutation
mutation={MUTATION_CONST}
>
{mutationName => (
)}
</Mutation>
amrf
Apollo Mutation Refetch Queries
<Mutation
mutation={MUTATION_CONST}
refetchQueries={['queryName']}
>
{mutationName => (
)}
</Mutation>
amb
<Mutation
mutation={MUTATION_CONST}
>
{$1:mutationName => <button onClick={mutationName}>$2</button>}
</Mutation>
asm
Apollo State Mutation
<ApolloConsumer>
{cache => (
<Button
onClick={() => cache.writeData({ data: { $1: $2 } })}
>
$3
</Button>
)}
</ApolloConsumer>
ap
Apollo Provider
<ApolloProvider client={client}>
<App />
</ApolloProvider>
This plugin is sponsored by Level Up Tutorials
Level Up Tutorials on Youtube
Level Up Tutorials on Instagram
Please consider becoming a pro subscriber or purchasing a tutorial series to help support Level Up Tutorials
Contribute
I'm happy to accept PRs for snippets that are wanted. I primarily made this for snippets that I personally use frequently and am probably missing some important ones.
