Fetch events from client

This commit is contained in:
Amit Jakubowicz 2019-05-18 17:05:56 +02:00
parent 435cfe9d02
commit f8a3ceeba6
12 changed files with 87 additions and 9 deletions

7
.graphqlconfig Normal file
View file

@ -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"
}
}

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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>
)
}

View file

@ -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",

16
client/tsconfig.json Normal file
View file

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

View file

@ -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"

View file

@ -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",

View file

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

View file

@ -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
}

View file

@ -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: [