Merge branch 'master' into develop

Author: Carlos Rufo

README.md

@@ -2,79 +2,84 @@
 
 This is the sample project that belongs to the [React & Apollo Tutorial](https://www.howtographql.com/react-apollo/0-introduction/) on How to GraphQL.
 
-## Running the App
+## How to use
 
 ### 1. Clone repository
 
 ```sh
 git clone https://github.com/howtographql/react-apollo/
 ```
 
-### 2. Deploy the Prisma database service
+### 2. Install dependencies & Deploy the Prisma database API
 
 ```sh
 cd react-apollo/server
+yarn install
 yarn prisma deploy
 ```
 
-When prompted where (i.e. to which _cluster_) you want to deploy your service, choose any of the public clusters, e.g. `public-us1` or `public-eu1`. (If you have Docker installed, you can also deploy locally.)
-
-### 3. Set the Prisma service endpoint
-
-From the output of the previous command, copy the `HTTP` endpoint and paste it into `server/src/index.js` where it's used to instantiate the `Prisma` binding. You need to replace the current placeholder `__PRISMA_ENDPOINT__`:
-
-```js
-const server = new GraphQLServer({
-  typeDefs: './src/schema.graphql',
-  resolvers,
-  context: req => ({
-    ...req,
-    db: new Prisma({
-      typeDefs: 'src/generated/prisma.graphql',
-      endpoint: '__PRISMA_ENDPOINT__',
-      secret: 'mysecret123',
-    }),
-  }),
-})
-```
-
-For example:
-
-```js
-const server = new GraphQLServer({
-  typeDefs: './src/schema.graphql',
-  resolvers,
-  context: req => ({
-    ...req,
-    db: new Prisma({
-      typeDefs: 'src/generated/prisma.graphql',
-      endpoint: 'https://eu1.prisma.sh/public-hillcloak-flier-942261/hackernews-graphql-js/dev',
-      secret: 'mysecret123',
-    }),
-  }),
-})
-```
-
-Note that the part `public-hillcloak-flier-952361` of the URL is unique to your service.
-
-### 4. Start the server
-
-To start the server, all you need to do is install the the dependencies execute the `start` script by running the following command inside the `server` directory:
+Then, follow these steps in the interactive CLI wizard:
+
+1. Select **Demo server**
+1. **Authenticate** with Prisma Cloud in your browser (if necessary)
+1. Back in your terminal, **confirm all suggested values**
+
+<details>
+ <summary>Alternative: Run Prisma locally via Docker</summary>
+
+1. Ensure you have Docker installed on your machine. If not, you can get it from [here](https://store.docker.com/search?offering=community&type=edition).
+1. Create `docker-compose.yml` for MySQL (see [here](https://www.prisma.io/docs/prisma-server/database-connector-POSTGRES-jgfr/) for Postgres):
+    ```yml
+    version: '3'
+    services:
+      prisma:
+        image: prismagraphql/prisma:1.23
+        restart: always
+        ports:
+        - "4466:4466"
+        environment:
+          PRISMA_CONFIG: |
+            port: 4466
+            databases:
+              default:
+                connector: mysql
+                host: mysql
+                port: 3306
+                user: root
+                password: prisma
+                migrations: true
+      mysql:
+        image: mysql:5.7
+        restart: always
+        environment:
+          MYSQL_ROOT_PASSWORD: prisma
+        volumes:
+          - mysql:/var/lib/mysql
+    volumes:
+      mysql:
+    ```
+1. Run `docker-compose up -d`
+1. Run `prisma deploy`
+
+</details>
+
+### 3. Start the server
+
+To start the server, all you need to do is execute the `start` script by running the following command inside the `server` directory:
 
 ```sh
-yarn install
 yarn start
 ```
 
-> **Note**: If you want to interact with the GraphQL APIs inside a [GraphQL Playground](https://github.com/graphcool/graphql-playground), you can also run `yarn dev`.
+> **Note**: If you want to interact with the GraphQL API of the server inside a [GraphQL Playground](https://github.com/prisma/graphql-playground), you can navigate to [http://localhost:4000](http://localhost:4000).
 
-### 5. Run the app
+### 4. Run the app
 
-Now that the server is running, you can start the app as well. The commands need to be run in a new terminal tab/window inside the root directory `react-apollo` (because the current tab is blocked by the process running the server):
+Now that the server is running, you can start the React app as well. The commands need to be run in a new terminal tab/window inside the root directory `react-apollo` (because the current tab is blocked by the process running the server):
 
 ```sh
 yarn install
 yarn start
 ```
 
-You can now open your browser and use the app on `http://localhost:3000`.
+You can now open your browser and use the app on [http://localhost:3000](http://localhost:3000).

server/prisma/prisma.yml

@@ -1,6 +1,5 @@
 # Specifies the HTTP endpoint of your Prisma API.
-#endpoint: ''
-endpoint: https://eu1.prisma.sh/carlos-rufo-20c5e9/server/dev
+endpoint: ''
 
 # Defines your models, each model is mapped to the database as a table.
 datamodel: datamodel.prisma

src/components/App.js

@@ -9,21 +9,21 @@ import Search from './Search'
 class App extends Component {
   render() {
     return (
-      <div className='center w85'>
+      <div className="center w85">
         <Header />
-        <div className='ph3 pv1 background-gray'>
+        <div className="ph3 pv1 background-gray">
           <Switch>
-            <Route exact path='/' render={() => <Redirect to='/new/1' />} />
-            <Route exact path='/create' component={CreateLink} />
-            <Route exact path='/login' component={Login} />
-            <Route exact path='/search' component={Search} />
-            <Route exact path='/top' component={LinkList} />
-            <Route exact path='/new/:page' component={LinkList} />
+            <Route exact path="/" render={() => <Redirect to="/new/1" />} />
+            <Route exact path="/create" component={CreateLink} />
+            <Route exact path="/login" component={Login} />
+            <Route exact path="/search" component={Search} />
+            <Route exact path="/top" component={LinkList} />
+            <Route exact path="/new/:page" component={LinkList} />
           </Switch>
         </div>
       </div>
     )
   }
 }
 
-export default App
+export default App

src/components/CreateLink.js

@@ -18,7 +18,7 @@ const POST_MUTATION = gql`
 class CreateLink extends Component {
   state = {
     description: '',
-    url: ''
+    url: '',
   }
 
   render() {
@@ -51,13 +51,13 @@ class CreateLink extends Component {
             const orderBy = 'createdAt_DESC'
             const data = store.readQuery({
               query: FEED_QUERY,
-              variables: { first, skip, orderBy }
+              variables: { first, skip, orderBy },
             })
             data.feed.links.unshift(post)
             store.writeQuery({
               query: FEED_QUERY,
               data,
-              variables: { first, skip, orderBy }
+              variables: { first, skip, orderBy },
             })
           }}
         >
@@ -68,4 +68,4 @@ class CreateLink extends Component {
   }
 }
 
-export default CreateLink
+export default CreateLink

src/components/Header.js

@@ -42,10 +42,10 @@ class Header extends Component {
               logout
             </div>
           ) : (
-            <Link to="/login" className="ml1 no-underline black">
-              login
+              <Link to="/login" className="ml1 no-underline black">
+                login
             </Link>
-          )}
+            )}
         </div>
       </div>
     )

src/components/Link.js

@@ -26,7 +26,7 @@ const VOTE_MUTATION = gql`
 class Link extends Component {
   render() {
     const authToken = localStorage.getItem(AUTH_TOKEN)
-    
+
     return (
       <div className="flex mt2 items-start">
         <div className="flex items-center">

src/components/LinkList.js

@@ -102,6 +102,7 @@ class LinkList extends Component {
         const newLink = subscriptionData.data.newLink
         const exists = prev.feed.links.find(({ id }) => id === newLink.id)
         if (exists) return prev
+
         return Object.assign({}, prev, {
           feed: {
             links: [newLink, ...prev.feed.links],

src/components/Login.js

@@ -24,7 +24,7 @@ class Login extends Component {
     login: true, // switch between Login and SignUp
     email: '',
     password: '',
-    name: ''
+    name: '',
   }
 
   render() {
@@ -88,4 +88,4 @@ class Login extends Component {
   }
 }
 
-export default Login
+export default Login

src/components/Search.js

@@ -27,10 +27,9 @@ const FEED_SEARCH_QUERY = gql`
 `
 
 class Search extends Component {
-
   state = {
     links: [],
-    filter: ''
+    filter: '',
   }
 
   render() {
@@ -39,7 +38,7 @@ class Search extends Component {
         <div>
           Search
           <input
-            type='text'
+            type="text"
             onChange={e => this.setState({ filter: e.target.value })}
           />
           <button onClick={() => this._executeSearch()}>OK</button>
@@ -62,4 +61,4 @@ class Search extends Component {
   }
 }
 
-export default withApollo(Search)
+export default withApollo(Search)