Cleanup / fix all example apps (#2439)

* Cleanup README * Cleanup README; Update deps; Component rename * Various mutation example updates - New README - Dependency updates - Test adjustments to fix failures - Component case change * Use ApolloServer 2; Meteor update; SSR approach update * Switch to npm file references; Add README * Changelog update
apollographql · Sep 30, 2018 · 66821ab · 66821ab
1 parent 3e2417f
commit 66821ab
Show file tree

Hide file tree

Showing 23 changed files with 185 additions and 2,288 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -38,6 +38,9 @@
   syntax, to work with default imports. We'll re-introduce
   `allowSyntheticDefaultImports` use in React Apollo 3. <br/>
   [@hwillson](https://github.com/hwillson) in [#2438](https://github.com/apollographql/react-apollo/pull/2438)
+- All example apps (included in the repo) have been updated to work with the
+  latest version of React Apollo. <br/>
+  [@hwillson](https://github.com/hwillson) in [#2439](https://github.com/apollographql/react-apollo/pull/2439)
 
 ## 2.2.2 (September 28, 2018)
 

diff --git a/examples/base/README.md b/examples/base/README.md
diff --git a/examples/components/README.md b/examples/components/README.md
@@ -0,0 +1,8 @@
+# Components Example
+
+```
+npm install
+npm start
+```
+
+This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
diff --git a/examples/components/package.json b/examples/components/package.json
@@ -3,11 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "apollo-boost": "^0.1.4",
-    "graphql-tag": "^2.6.0",
-    "react": "^16.2.0",
+    "apollo-boost": "^0.1.16",
+    "graphql-tag": "^2.9.2",
+    "react": "^16.5.2",
     "react-apollo": "../../lib",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.5.2",
     "react-scripts": "1.1.5"
   },
   "scripts": {
@@ -17,6 +17,6 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
-    "react-testing-library": "5.0.0"
+    "react-testing-library": "5.1.0"
   }
 }
diff --git a/examples/components/src/App.js b/examples/components/src/App.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Query } from 'react-apollo';
 import gql from 'graphql-tag';
-import Character from './character';
+import Character from './Character';
 
 export const HERO_QUERY = gql`
   query GetCharacter($episode: Episode!) {

diff --git a/examples/components/src/__tests__/character.js b/examples/components/src/__tests__/character.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { render } from 'react-testing-library';
-import Character from '../character';
+import Character from '../Character';
 
 import {
   empty,

diff --git a/examples/components/src/index.js b/examples/components/src/index.js
@@ -3,7 +3,7 @@ import { render } from 'react-dom';
 import ApolloClient from 'apollo-boost';
 import { ApolloProvider } from 'react-apollo';
 
-import { App } from './App';
+import App from './App';
 
 const client = new ApolloClient({
   uri: 'https://mpjk0plp9.lp.gql.zone/graphql',

diff --git a/examples/mutation/README.md b/examples/mutation/README.md
@@ -0,0 +1,8 @@
+# Mutation Example
+
+```
+npm install
+npm start
+```
+
+This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
diff --git a/examples/mutation/package.json b/examples/mutation/package.json
@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "apollo-boost": "^0.1.6",
-    "graphql": "^0.13.2",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
+    "apollo-boost": "^0.1.16",
+    "graphql": "^14.0.2",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
     "react-scripts": "1.1.5",
     "react-apollo": "../../lib"
   },
@@ -17,6 +17,6 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
-    "react-testing-library": "3.1.7"
+    "react-testing-library": "5.1.0"
   }
 }
diff --git a/examples/mutation/src/addUser.js b/examples/mutation/src/addUser.js
@@ -49,11 +49,7 @@ export default class AddUser extends React.Component {
           if (createUser) {
             const { username, id } = createUser;
 
-            return (
-              <div>
-                Created {username} with id {id}
-              </div>
-            );
+            return <div>{`Created ${username} with id ${id}`}</div>;
           } else {
             return null;
           }

diff --git a/examples/mutation/src/addUser.test.js b/examples/mutation/src/addUser.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import { render, Simulate, wait } from 'react-testing-library';
+import { render, fireEvent, wait } from 'react-testing-library';
 import { MockedProvider } from 'react-apollo/test-utils';
 
-import AddUser, { ADD_USER } from './addUser';
+import AddUser, { ADD_USER } from './AddUser';
 
 const request = {
   query: ADD_USER,
@@ -17,6 +17,7 @@ const mocks = [
         createUser: {
           id: '1',
           username: 'peter',
+          __typename: 'User',
         },
       },
     },
@@ -45,18 +46,18 @@ it('renders content if the mutation has not been called', () => {
 });
 
 it('fires the mutation', async () => {
-  const { container, getByPlaceholderText, getByTestId, getByText, queryByText } = render(
+  const { container, getByPlaceholderText, getByTestId, getByText, queryByText, debug } = render(
     <MockedProvider mocks={mocks} addTypename={false}>
       <AddUser />
     </MockedProvider>,
   );
 
   const inputNode = getByPlaceholderText('Username');
-  inputNode.value = 'peter';
-  Simulate.change(inputNode);
+  inputNode.defaultValue = 'peter';
+  fireEvent.change(inputNode);
 
   const buttonNode = getByTestId('add-user-button');
-  Simulate.click(buttonNode);
+  fireEvent.click(buttonNode);
 
   getByText('LOADING');
 
@@ -74,11 +75,10 @@ it('errors', async () => {
 
   const inputNode = getByPlaceholderText('Username');
   inputNode.value = 'peter';
-  Simulate.change(inputNode);
+  fireEvent.change(inputNode);
 
   const buttonNode = getByTestId('add-user-button');
-
-  Simulate.click(buttonNode);
+  fireEvent.click(buttonNode);
 
   await waitUntilLoadingIsFinished(queryByText);
 

diff --git a/examples/mutation/src/index.js b/examples/mutation/src/index.js
@@ -3,10 +3,10 @@ import { render } from 'react-dom';
 import ApolloClient from 'apollo-boost';
 import { ApolloProvider } from 'react-apollo';
 
-import AddUser from './addUser';
+import AddUser from './AddUser';
 
 const client = new ApolloClient({
-  uri: 'https://kqpk9j3kz7.lp.gql.zone/graphql',
+  uri: 'https://n1k5mkl017.lp.gql.zone/graphql',
 });
 
 const WrappedApp = (

diff --git a/examples/ssr/.meteor/.finished-upgraders b/examples/ssr/.meteor/.finished-upgraders
@@ -15,3 +15,4 @@ notices-for-facebook-graph-api-2
 1.4.1-add-shell-server-package
 1.4.3-split-account-service-packages
 1.5-add-dynamic-import-package
+1.7-split-underscore-from-meteor-base
diff --git a/examples/ssr/.meteor/packages b/examples/ssr/.meteor/packages
@@ -4,17 +4,17 @@
 # 'meteor add' and 'meteor remove' will edit this file for you,
 # but you can also edit it by hand.
 
-meteor-base@1.1.0             # Packages every Meteor app needs to have
-[email protected].4       # Packages for a great mobile UX
-mongo@1.1.19                   # The database Meteor supports right now
+meteor-base@1.4.0             # Packages every Meteor app needs to have
+[email protected].5       # Packages for a great mobile UX
+mongo@1.5.0                   # The database Meteor supports right now
 static-html             # Define static page content in .html files
 [email protected]            # Reactive variable for tracker
-tracker@1.1.3                 # Meteor's client-side reactive programming library
+tracker@1.2.0                 # Meteor's client-side reactive programming library
 
-standard-minifier-css@1.3.4   # CSS minifier run for production mode
-standard-minifier-js@2.1.1    # JS minifier run for production mode
-es5-shim@4.6.15                # ECMAScript 5 compatibility for older browsers
-ecmascript@0.8.1              # Enable ECMAScript2015+ syntax in app code
-shell-server@0.2.4            # Server-side component of the `meteor shell` command
-server-render
-apollo
+standard-minifier-css@1.4.1   # CSS minifier run for production mode
+standard-minifier-js@2.3.4    # JS minifier run for production mode
+es5-shim@4.8.0                # ECMAScript 5 compatibility for older browsers
+ecmascript@0.11.1              # Enable ECMAScript2015+ syntax in app code
+shell-server@0.3.1            # Server-side component of the `meteor shell` command
+server-render@0.3.1
+underscore
diff --git a/examples/ssr/.meteor/release b/examples/ssr/.meteor/release
@@ -1 +1 @@
-METEOR@1.5.1
+METEOR@1.7.0.5
diff --git a/examples/ssr/.meteor/versions b/examples/ssr/.meteor/versions
@@ -1,77 +1,68 @@
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
 [email protected]
-[email protected]
 [email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
 [email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
 [email protected]
 [email protected]
 [email protected]
 [email protected]
-[email protected]
-[email protected]
-[email protected]
+[email protected]
+[email protected]
 [email protected]
 [email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
 [email protected]
-modules@0.9.2
-modules-runtime@0.8.0
-[email protected]
-mongo-id@1.0.6
-npm-mongo@2.2.24
-observe-sequence@1.0.16
-ordered-dict@1.0.9
-[email protected]
-[email protected]
-rate-limit@1.0.8
+modern-browsers@0.1.2
+modules@0.12.2
+[email protected]
+mongo@1.5.1
+mongo[email protected]
+mongo-id@1.0.7
+npm-mongo@3.0.11
+[email protected]
+[email protected]
+random@1.1.0
 [email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
 [email protected]
 [email protected]
-[email protected]
-[email protected]
+[email protected]
 [email protected]
-url@1.1.0
-webapp@1.3.17
+url@1.2.0
+webapp@1.6.2
 [email protected]
diff --git a/examples/ssr/README.md b/examples/ssr/README.md
@@ -0,0 +1,10 @@
+# SSR Example
+
+**Note:** This example uses Meteor. Meteor can be downloaded [here](https://www.meteor.com/install).
+
+```
+meteor npm install
+meteor npm start
+```
+
+Access: http://localhost:3000
diff --git a/examples/ssr/client/main.js b/examples/ssr/client/main.js
@@ -1,13 +1,18 @@
-import { render } from 'react-dom';
+import { hydrate } from 'react-dom';
 import { onPageLoad } from 'meteor/server-render';
-import { ApolloProvider, ApolloClient, createNetworkInterface } from 'react-apollo';
+import { ApolloProvider } from 'react-apollo';
+import { ApolloClient } from 'apollo-client';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import { HttpLink } from 'apollo-link-http';
 
 import { App } from '/imports/app';
 
 export const start = () => {
   const client = new ApolloClient({
-    networkInterface: createNetworkInterface({ uri: 'http://localhost:3000' }),
-    initialState: { apollo: window.__APOLLO_STATE__ },
+    link: new HttpLink({
+      uri: 'http://localhost:3000/graphql',
+    }),
+    cache: new InMemoryCache().restore(window.__APOLLO_STATE__),
   });
 
   const WrappedApp = (
@@ -16,7 +21,7 @@ export const start = () => {
     </ApolloProvider>
   );
 
-  render(WrappedApp, document.getElementById('app'));
+  hydrate(WrappedApp, document.getElementById('app'));
 };
 
 onPageLoad(start);