This snippet library is currently geared at users of apollo-boost
. If you're setting things up the old way and would like to add a snippet or two feel free to make suggestions or toss up a PR. If anyone has any suggestions whatsoever on anything I've done here let me know. I tried to create a few useful snippets for common React Apollo patterns I kept running into, but things can always be better :)
Many of these snippets are based examples provided by the Apollo docs.
abc
( Apollo Boost Client )import ApolloClient from "apollo-boost"const client = new ApolloClient({uri: "endpoint"});
abcc
(Apollo Boost Client w/ clientState)import ApolloClient from "apollo-boost"const client = new ApolloClient({uri: "endpoint",clientState: {defaults,resolvers,typeDefs}});
aba
(Apollo Boost App w/ Client)import React from "react";import { render } from "react-dom";import { ApolloProvider } from "react-apollo";import ApolloClient from "apollo-boost"const client = new ApolloClient({uri: "endpoint"});const App = () =><ApolloProvider client={client}><div></div></ApolloProvider>render(<App/>, document.getElementById("root"));
gql
( GraphQL query/mutation variable )const MY_QUERY = gql``;
qc
( Query Component )<Queryquery={ MY_QUERY }variables={{}}>{({ data, loading, error, refetch, networkStatus }) => {if (loading) return 'Loading';if (error) return `Error!: ${error}`;return (<div> </div>)}}</Query>
mc
( Mutation Component )<Mutationmutation={ MY_MUTATION }>{(mutationFunc, { data, loading, called, error }) => {return (<div><button onClick={(e)=>{e.preventDefault();mutationFunc({variables: { }})}}/></div>)}}</Mutation>
ac
( ApolloConsumer Component )<ApolloConsumer>{ client => (<div><buttononClick={async () => {const { data } = await client.query({query: MY_QUERY,variables: { }});}}/></div>)}</ApolloConsumer>
or
( optimisticResponse )optimisiticResponse: {__typeName: "Mutation",updateThing: {id: "",__typeName: "Thing",content: "Lowered expectations"}}
qcc
( React Class Component w/ Query )import React, { Component } from "react";import { Query } from "react-apollo";import { gql } from 'apollo-boost';export default class MyComponent extends Component {render(){return (<Queryquery={MY_QUERY}>{({ data, loading, error, refetch, networkStatus }) => {if (loading) return 'Loading';if (error) return `Error!: ${error}`;return (<div> MyComponent </div>)}}</Query>)}}const MY_QUERY = gql`query {}`;
qcf
( React Functional Component w/ Query )import React from "react";import { Query } from "react-apollo";import { gql } from 'apollo-boost';const MyComponent = (props) => {return (<Queryquery={MY_QUERY}>{({ data, loading, error, refetch, networkStatus }) => {if (loading) return 'Loading';if (error) return `Error!: ${error}`;return (<div> MyComponent </div>)}}</Query>)}const MY_QUERY = gql`query {}`;
mcc
( React Class Component w/ Mutation )import React, { Component } from "react";import { Mutation } from "react-apollo";import { gql } from 'apollo-boost';export default class MyComponent extends Component {render(){return (<Mutationmutation={MY_MUTATION}>{(mutationFunc, { data, loading, called, error }) => {return (<div><button onClick={(e)=>{e.preventDefault();mutationFunc}({variables: { }})}}/></div>)}}</Mutation>)}}const MY_MUTATION = gql`mutation {}`;
mcf
( React Functional Component w/ Mutation )import React from "react";import { Mutation } from "react-apollo";import { gql } from 'apollo-boost';const MyComponent = (props) => {return (<Mutationmutation={MY_MUTATION}>{(mutationFunc, { data, loading, called, error }) => {return (<div><button onClick={(e)=>{e.preventDefault();mutationFunc}({variables: { }})}}/></div>)}}</Mutation>)}const MY_MUTATION = gql`mutation {}`;
acc
( React Functional Component w/ ApolloConsumer )import React from "react";import { ApolloConsumer } from "react-apollo";import { gql } from 'apollo-boost';const MyComponent = (props) => {return (<ApolloConsumer>{ client => (<div><buttononClick={async () => {const { data } = await client.query({query: MY_QUERY,variables: { }});}}/></div>)}</ApolloConsumer>)}export default MyComponent;
acf
( React Class Component w/ ApolloConsumer )import React, { Component } from "react";import { ApolloConsumer } from "react-apollo";import { gql } from 'apollo-boost';export default class MyComponent extends Component {render(){return (<ApolloConsumer>{ client => (<div><buttononClick={async () => {const { data } = await client.query({query: MY_QUERY,variables: { }});}}/></div>)}</ApolloConsumer>)}}
igql
( import gql )import { gql } from "apollo-boost";
iqc
( import Query component )import { Query } from "react-apollo";
imc
( import Mutation component )import { Mutation } from "react-apollo"
iap
( import ApolloProvider )import { ApolloProvider } from "react-apollo"
icg
( import compose, graphql )import { compose, graphql } from "react-apollo";
ig
( import graphql )import { graphql } from "react-apollo";
edc
( export default Compose, GraphQL )export default compose(graphql(MY_QUERY))(MyComponent)
edg
( export default GraphQL )export default graphql(MY_QUERY)(MyComponent)
Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.