Fetch events from client

.graphqlconfig

@@ -0,0 +1,7 @@
+{
+  "README_schema" : "Specifies how to load the GraphQL schema that completion, error highlighting, and documentation is based on in the IDE",
+  "schema": {
+    "README_file" : "Remove 'file' to use request url below. A relative or absolute path to the JSON from a schema introspection query, e.g. '{ data: ... }' or a .graphql/.graphqls file describing the schema using GraphQL Schema Language. Changes to the file are watched.",
+    "file": "./server/src/schema.graphql"
+  }
+}

client/App/App.tsx

@@ -1,7 +1,33 @@
 import * as React from 'react'
 import { BrowserRouter as Router, Route, Link } from "react-router-dom"
+import Calendar from "../Calendar/Calendar"
+import { ApolloProvider } from 'react-apollo'
+import { ApolloClient } from 'apollo-client'
+import { HttpLink } from 'apollo-link-http'
+import { IdGetterObj, InMemoryCache } from "apollo-cache-inmemory"
+
+const httpLink = new HttpLink({
+  uri: 'http://localhost:4000',
+})
+
+
+const graphqlClient = new ApolloClient({
+  connectToDevTools: true,
+  link: httpLink,
+  cache: new InMemoryCache({
+    dataIdFromObject: (o: IdGetterObj) => {
+      if (o.id && o.__typename) {
+        return `${o.__typename}_${o.id}`
+      } else {
+        return o.id
+      }
+    }
+  })
+}) as ApolloClient<any>
 
 const App = () => (
-  <h1>Hello from app</h1>
+  <ApolloProvider client={graphqlClient}>
+    <Calendar />
+  </ApolloProvider>
 )
 export default App

client/App/index.tsx

@@ -4,7 +4,7 @@ import App from './App'
 
 const appWrapper = document.createElement('div')
 document.body.appendChild(appWrapper)
-console.log('appWrapper', appWrapper)
+
 ReactDOM.render(<App />, appWrapper)
 
 export default App

client/Calendar/Calendar.tsx

@@ -24,7 +24,9 @@ const Calendar = () => (
         return error.message
       }
 
-      return data.events.map(event => <Event event={event} />)
+      return data.events.map(event => <Event key={event.id} event={event} />)
     }}
   </EventsQuery>
 )
+
+export default Calendar

client/Event/Event.tsx

@@ -11,10 +11,18 @@ const Event = (props: Props) => {
   const localInfo = props.language
     ? props.event.info.find(info => info.language === props.language)
     : props.event.info[0]
+
   return (
     <div>
-      <h1> {localInfo.title} </h1>
-      <p> {localInfo.description} </p>
+      {
+        localInfo ? (
+          <React.Fragment>
+            <h1> {localInfo.title} </h1>
+            <p> {localInfo.description} </p>
+          </React.Fragment>
+        ) : 'Info not available'
+      }
+
     </div>
   )
 }

client/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "apollo-cache-inmemory": "^1.3.8",
     "apollo-client": "^2.4.5",
+    "apollo-link-http": "^1.5.14",
     "date-fns": "^1.29.0",
     "formik": "^1.4.1",
     "graphql": "^14.0.2",

client/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "jsx": "react",
+    "module": "commonjs",
+    "lib": [
+      "dom",
+      "es7",
+      "esnext.asynciterable"
+    ]
+  },
+  "exclude": [
+    ".*/__tests__/.*", "node_modules"
+  ]
+}

client/yarn.lock

@@ -1439,6 +1439,24 @@ apollo-link-dedup@^1.0.0:
     apollo-link "^1.2.11"
     tslib "^1.9.3"
 
+apollo-link-http-common@^0.2.13:
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/apollo-link-http-common/-/apollo-link-http-common-0.2.13.tgz#c688f6baaffdc7b269b2db7ae89dae7c58b5b350"
+  integrity sha512-Uyg1ECQpTTA691Fwx5e6Rc/6CPSu4TB4pQRTGIpwZ4l5JDOQ+812Wvi/e3IInmzOZpwx5YrrOfXrtN8BrsDXoA==
+  dependencies:
+    apollo-link "^1.2.11"
+    ts-invariant "^0.3.2"
+    tslib "^1.9.3"
+
+apollo-link-http@^1.5.14:
+  version "1.5.14"
+  resolved "https://registry.yarnpkg.com/apollo-link-http/-/apollo-link-http-1.5.14.tgz#ed6292248d1819ccd16523e346d35203a1b31109"
+  integrity sha512-XEoPXmGpxFG3wioovgAlPXIarWaW4oWzt8YzjTYZ87R4R7d1A3wKR/KcvkdMV1m5G7YSAHcNkDLe/8hF2nH6cg==
+  dependencies:
+    apollo-link "^1.2.11"
+    apollo-link-http-common "^0.2.13"
+    tslib "^1.9.3"
+
 apollo-link@^1.0.0, apollo-link@^1.2.11, apollo-link@^1.2.3:
   version "1.2.11"
   resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.11.tgz#493293b747ad3237114ccd22e9f559e5e24a194d"

package.json

@@ -15,7 +15,9 @@
     "server"
   ],
   "scripts": {
-    "codegen": "gql2ts ./schema.graphql -o ./@types/graphql.d.ts"
+    "codegen": "gql2ts ./schema.graphql -o ./@types/graphql.d.ts",
+    "server": "(cd server; yarn start)",
+    "client": "(cd client; yarn start)"
   },
   "dependencies": {
     "gql2ts": "^1.10.1",

server/ormconfig.json

@@ -4,7 +4,6 @@
   "port":  5432,
   "database": "qpa-dev",
   "entities": ["src/**/*.entity.ts"],
-  "synchronize": true,
   "migrations": ["migrations/*.ts"],
   "cli": {
     "migrationsDir": "./migrations"

server/ormconfig.ts

@@ -7,7 +7,6 @@ const config: ConnectionOptions = {
   port: Number(process.env.POSTGRES_PORT || 5432),
   database: process.env.POSTGRES_DB || 'qpa-dev',
   entities: ["src/**/*.entity.ts"],
-  synchronize: true,
   logging: true
 }
 

server/src/graphql.ts

@@ -27,7 +27,7 @@ export const createServer = async (dependencies: Dependencies) => {
     emailTargetDomain: dependencies.domain,
   })
 
-  const typeDefs = importSchema(__dirname + '/schema.graphql')
+  const typeDefs = importSchema(__dirname + '/../../schema.graphql')
 
   const schema = makeExecutableSchema({
     typeDefs: [