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

Apollo Mutation Button

<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>

Sponsorship

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.

leveluptuts / React-Apollo-Snippets-for-VSCode

readme