scottdomes

import { GET_CONTACTS } from './query';

const updateLocalStore = (cache, { data: { createContact } }) => {
  const oldContacts = cache.readQuery({
    query: GET_CONTACTS
  }).viewer.allContacts.edges;
  cache.writeQuery({
    query: GET_CONTACTS,
    data: {
      viewer: {

scottdomes

import { ConnectionHandler } from 'relay-runtime';

const sharedUpdater = (store, viewer, newEdge) => {
  const viewerProxy = store.get(viewer.id);
  const conn = ConnectionHandler.getConnection(viewerProxy, 'Main_allContacts');
  ConnectionHandler.insertEdgeAfter(conn, newEdge);
};

const updateLocalStore = (store, data, viewer) => {
  const payload = store.getRootField('createContact');

scottdomes

import React from 'react';
import gql from 'graphql-tag';
import { Mutation } from 'react-apollo';
import Form from '../components/Form';
import updateLocalStore from './updateLocalStore';

const CREATE_CONTACT = gql`
  mutation createContact($input: ContactInput!) {
    createContact(input: $input) {
      contactEdge {

scottdomes

import React from 'react';
import Form from '../components/Form';
import { commitMutation } from 'react-relay';
import graphql from 'babel-plugin-relay/macro';
import environment from './environment';
import updateLocalStore from './updateLocalStore';

const mutation = graphql`
  mutation MutationComponentMutation($input: ContactInput!) {
    createContact(input: $input) {

scottdomes

import gql from 'graphql-tag';

export const GET_CONTACTS = gql`
  query contacts {
    viewer {
      allContacts {
        edges {
          node {
            name
            email

scottdomes

import graphql from 'babel-plugin-relay/macro';

export const GET_CONTACTS = graphql`
  query queryQuery {
    viewer {
      id
      allContacts(first: 1000) @connection(key: "Main_allContacts") {
        edges {
          node {
            id

scottdomes

import React from 'react';
import ApolloClient from 'apollo-boost';
import { ApolloProvider, Query } from 'react-apollo';
import { GET_CONTACTS } from './query';

const client = new ApolloClient({
  uri: 'http://localhost:8080/graphql'
});

const QueryComponent = ({ children }) => {

scottdomes

import React from 'react';
import { QueryRenderer } from 'react-relay';
import environment from './environment';
import { GET_CONTACTS } from './query';

const QueryComponent = ({ children }) => {
  return (
    <QueryRenderer
      environment={environment}
      query={GET_CONTACTS}

scottdomes

const Main = () => {
  return (
    <div className="Main">
      <Link to="/apollo" className="switch">
        Switch to Apollo
      </Link>
      <div className="container">
        <QueryComponent>
          {data => {
            return (

scottdomes

const App = () => {
  return (
    <Router>
      <React.Fragment>
        <Route path="/apollo" component={ApolloMain} />
        <Route path="/relay" component={RelayMain} />
      </React.Fragment>
    </Router>
  );
};