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.
import ApolloClient from "apollo-boost" const client = new ApolloClient({ uri: "endpoint" });import ApolloClient from "apollo-boost" const client = new ApolloClient({ uri: "endpoint", clientState: { defaults, resolvers, typeDefs } });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"));const MY_QUERY = gql` `;<Query query={ MY_QUERY } variables={{}}> {({ data, loading, error, refetch, networkStatus }) => { if (loading) return 'Loading'; if (error) return `Error!: ${error}`; return ( <div> </div> ) }} </Query><Mutation mutation={ MY_MUTATION }> {(mutationFunc, { data, loading, called, error }) => { return ( <div> <button onClick={(e)=>{ e.preventDefault(); mutationFunc({ variables: { } }) }}/> </div> ) }} </Mutation><ApolloConsumer> { client => ( <div> <button onClick={async () => { const { data } = await client.query({ query: MY_QUERY, variables: { } }); }} /> </div> )} </ApolloConsumer>optimisiticResponse: { __typeName: "Mutation", updateThing: { id: "", __typeName: "Thing", content: "Lowered expectations" } }import React, { Component } from "react"; import { Query } from "react-apollo"; import { gql } from 'apollo-boost'; export default class MyComponent extends Component { render(){ return ( <Query query={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 { } `;import React from "react"; import { Query } from "react-apollo"; import { gql } from 'apollo-boost'; const MyComponent = (props) => { return ( <Query query={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 { } `;import React, { Component } from "react"; import { Mutation } from "react-apollo"; import { gql } from 'apollo-boost'; export default class MyComponent extends Component { render(){ return ( <Mutation mutation={MY_MUTATION}> {(mutationFunc, { data, loading, called, error }) => { return ( <div> <button onClick={(e)=>{ e.preventDefault(); mutationFunc}({ variables: { } }) }}/> </div> ) }} </Mutation> ) } } const MY_MUTATION = gql` mutation { } `;import React from "react"; import { Mutation } from "react-apollo"; import { gql } from 'apollo-boost'; const MyComponent = (props) => { return ( <Mutation mutation={MY_MUTATION}> {(mutationFunc, { data, loading, called, error }) => { return ( <div> <button onClick={(e)=>{ e.preventDefault(); mutationFunc}({ variables: { } }) }}/> </div> ) }} </Mutation> ) } const MY_MUTATION = gql` mutation { } `;import React from "react"; import { ApolloConsumer } from "react-apollo"; import { gql } from 'apollo-boost'; const MyComponent = (props) => { return ( <ApolloConsumer> { client => ( <div> <button onClick={async () => { const { data } = await client.query({ query: MY_QUERY, variables: { } }); }} /> </div> )} </ApolloConsumer> ) } export default MyComponent;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> <button onClick={async () => { const { data } = await client.query({ query: MY_QUERY, variables: { } }); }} /> </div> )} </ApolloConsumer> ) } }import { gql } from "apollo-boost";import { Query } from "react-apollo";import { Mutation } from "react-apollo"import { ApolloProvider } from "react-apollo"import { compose, graphql } from "react-apollo";import { graphql } from "react-apollo";export default compose( graphql(MY_QUERY) )(MyComponent)export default graphql(MY_QUERY)(MyComponent)