configure getting-started example

examples/1-getting-started/package.json

@@ -6,11 +6,13 @@
   "scripts": {
     "start:server": "node ./src/server/index.js",
     "start:client": "webpack-dev-server --hot --inline",
-    "start": "run-p start:server start:client"
+    "start": "npm run build --prefix ../../ && run-p start:server start:client"
   },
   "devDependencies": {
     "awesome-typescript-loader": "^5.2.1",
+    "css-loader": "^2.1.0",
     "npm-run-all": "^4.1.5",
+    "style-loader": "^0.23.1",
     "typescript": "^3.3.1",
     "webpack": "^4.29.2",
     "webpack-cli": "^3.2.3",
@@ -26,6 +28,7 @@
     "isomorphic-fetch": "^2.2.1",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
-    "subscriptions-transport-ws": "^0.9.15"
+    "subscriptions-transport-ws": "^0.9.15",
+    "urql": "file:../../"
   }
 }

examples/1-getting-started/src/app/Home.tsx

@@ -21,7 +21,13 @@ export const Home: FC = () => {
       return <Error>{query.error.message}</Error>;
     }
 
-    return query.data.todos.map(todo => <Todo key={todo.id} {...todo} />);
+    return (
+      <ul>
+        {query.data.todos.map(todo => (
+          <Todo key={todo.id} {...todo} />
+        ))}
+      </ul>
+    );
   };
 
   return (
@@ -37,9 +43,7 @@ query {
   todos {
     id
     text
-  }
-  user {
-    name
+    complete
   }
 }
 `;

examples/1-getting-started/src/app/components/Todo.tsx

@@ -4,33 +4,19 @@ import { useMutation } from 'urql';
 export const Todo = props => {
   const [mutation, executeMutation] = useMutation(RemoveTodo);
 
-  const handleButtonClick = () => executeMutation({ id: props.id });
-
-  const getButtonText = () => {
-    if (mutation.fetching || mutation.data === undefined) {
-      return 'deleting...';
-    }
-
-    if (mutation.error) {
-      return 'unable to delete.';
-    }
-
-    return 'remove';
-  };
+  const handleToggle = () => executeMutation({ id: props.id });
 
   return (
-    <li>
-      <p>{props.text}</p>>
-      <button type="button" onClick={handleButtonClick}>
-        {getButtonText()}
-      </button>
+    <li onClick={handleToggle}>
+      <p className={`${props.complete ? 'strikethrough' : ''}`}>{props.text}</p>
+      {mutation.fetching && <span>(updating)</span>}
     </li>
   );
 };
 
 const RemoveTodo = `
 mutation($id: ID!) {
-  removeTodo(id: $id) {
+  toggleTodo(id: $id) {
     id
   }
 }

examples/1-getting-started/src/app/index.css

@@ -0,0 +1,46 @@
+html {
+  background: #488;
+  font-family: sans-serif;
+}
+
+#root {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+main {
+  width: 400px;
+}
+
+h1 {
+  color: #2d4a4a;
+}
+
+h4 {
+  margin: 0;
+  margin-bottom: 5px;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  background: #fff;
+  display: flex;
+  justify-content: space-between;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+  padding: 20px;
+  margin: 20px 0;
+  border-radius: 4px;
+}
+
+li span {
+  color: #999;
+}
+
+.strikethrough {
+  text-decoration: line-through;
+}

examples/1-getting-started/src/app/index.tsx

@@ -2,14 +2,18 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createClient, Provider } from 'urql';
 import { Home } from './home';
+import './index.css';
 
 const client = createClient({
   url: 'http://localhost:3001/graphql',
 });
 
 export const App: React.SFC<{}> = () => (
   <Provider value={client}>
-    <Home />
+    <main>
+      <h1>Todos</h1>
+      <Home />
+    </main>
   </Provider>
 );
 

examples/1-getting-started/src/server/schema.js

@@ -1,53 +1,36 @@
 const fetch = require('isomorphic-fetch');
-const uuid = require('uuid/v4');
-const { PubSub } = require('graphql-subscriptions');
-
-const pubsub = new PubSub();
 
 const store = {
   todos: [
     {
-      id: uuid(),
-      text: 'test',
+      id: 0,
+      text: 'Go to the shops',
+      complete: false,
     },
     {
-      id: uuid(),
-      text: 'test2',
+      id: 1,
+      text: 'Pick up the kids',
+      complete: true,
     },
     {
-      id: uuid(),
-      text: 'test3',
+      id: 2,
+      text: 'Install urql',
+      complete: false,
     },
   ],
-  user: {
-    name: 'Ken',
-    age: 32,
-  },
 };
 
 const typeDefs = `
   type Query {
     todos: [Todo]
-    todo(id: ID!): Todo
-    user: User
   }
   type Mutation {
-    addTodo(text: String!): Todo
-    removeTodo(id: ID!): Todo
-    editTodo(id: ID!, text: String!): Todo
-  }
-  type Subscription {
-    todoAdded: Todo
-    todoRemoved: Todo
-    todoUpdated: Todo
+    toggleTodo(id: ID!): Todo
   }
   type Todo {
     id: ID,
     text: String,
-  }
-  type User {
-    name: String
-    age: Int
+    complete: Boolean,
   }
 `;
 
@@ -56,51 +39,12 @@ const resolvers = {
     todos: (root, args, context) => {
       return store.todos;
     },
-    todo: (root, args, context) => {
-      return store.todos.find(a => (a.id = args.id));
-    },
-    user: (root, args, context) => {
-      return store.user;
-    },
   },
   Mutation: {
-    addTodo: (root, args, context) => {
-      const id = uuid();
-      const { text } = args;
-      const todo = { id, text };
-
-      store.todos.push(todo);
-      pubsub.publish('todoAdded', { todoAdded: { id, text: { text } } });
-
-      return todo;
-    },
-    removeTodo: (root, args, context) => {
+    toggleTodo: (root, args, context) => {
       const { id } = args;
-      let todo = store.todos.find(todo => todo.id === id);
-      store.todos.splice(store.todos.indexOf(todo), 1);
-      pubsub.publish('todoRemoved', { todoRemoved: todo });
-      return { id };
-    },
-    editTodo: (root, args, context) => {
-      const { id, text } = args;
-      let todo = store.todos.some(todo => todo.id === id);
-      pubsub.publish('todoUpdated', { todoUpdated: todo });
-      todo.text = text;
-      return {
-        text,
-        id,
-      };
-    },
-  },
-  Subscription: {
-    todoAdded: {
-      subscribe: () => pubsub.asyncIterator('todoAdded'),
-    },
-    todoRemoved: {
-      subscribe: () => pubsub.asyncIterator('todoRemoved'),
-    },
-    todoUpdated: {
-      subscribe: () => pubsub.asyncIterator('todoUpdated'),
+      store.todos[args.id].complete = !store.todos[args.id].complete;
+      return store.todos[args.id];
     },
   },
 };

examples/1-getting-started/tsconfig.json

@@ -5,10 +5,7 @@
     "strict": false,
     "lib": ["dom", "es2018", "esnext.asynciterable", "esnext.array"],
     "jsx": "react",
-    "esModuleInterop": true,
-    "paths": {
-      "urql": ["../../../dist"]
-    }
+    "esModuleInterop": true
   },
   "include": ["**/.ts", "**/*.tsx"]
 }

examples/1-getting-started/webpack.config.js

@@ -29,11 +29,14 @@ module.exports = {
           },
         ],
       },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
     ],
   },
   resolve: {
     alias: {
-      urql: path.resolve(__dirname, '../../dist/urql'),
       react: path.resolve(__dirname, '../../node_modules/react'),
       'react-dom': path.resolve(__dirname, '../../node_modules/react-dom'),
     },