From c3338831624d63b782fbdfcca1ad1b275f86bf99 Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Fri, 31 Jan 2020 00:54:13 -0500 Subject: [PATCH] feat: client retrieves data from GraphQL --- client/src/app.js | 3 -- client/src/components/app.js | 4 +++ client/src/components/book.js | 8 +++++ client/src/components/booklist.js | 50 +++++++++++++++++++++++++++++++ client/src/index.html | 6 ++-- client/src/index.js | 2 +- server/app.js | 3 ++ server/package-lock.json | 16 +++++++++- server/package.json | 1 + 9 files changed, 85 insertions(+), 8 deletions(-) delete mode 100644 client/src/app.js create mode 100644 client/src/components/app.js create mode 100644 client/src/components/book.js create mode 100644 client/src/components/booklist.js diff --git a/client/src/app.js b/client/src/app.js deleted file mode 100644 index 5fc30ef..0000000 --- a/client/src/app.js +++ /dev/null @@ -1,3 +0,0 @@ -import React from 'react'; - -export default () =>
Hi
; diff --git a/client/src/components/app.js b/client/src/components/app.js new file mode 100644 index 0000000..7b6be52 --- /dev/null +++ b/client/src/components/app.js @@ -0,0 +1,4 @@ +import React from 'react'; +import Booklist from './booklist'; + +export default () => ; diff --git a/client/src/components/book.js b/client/src/components/book.js new file mode 100644 index 0000000..63da96e --- /dev/null +++ b/client/src/components/book.js @@ -0,0 +1,8 @@ +import React from 'react'; + +export default ({ id, title, author, genre }) => ( +
+
{title} - {author}
+
{genre}
+
+); diff --git a/client/src/components/booklist.js b/client/src/components/booklist.js new file mode 100644 index 0000000..83b0509 --- /dev/null +++ b/client/src/components/booklist.js @@ -0,0 +1,50 @@ +import React from 'react'; +import { useQuery } from 'urql'; +import Book from './book'; + +const getBooks = ` +query GetBooks { + books { + id + name + author { + name + } + genre + } +} +`; + +function process (result) { + if (result.fetching) return 'Loading...'; + if (result.error) { console.error(result); return 'Error'; } + return ( + + ); +} + +function mapBooks ({ + id, + name: title, + author: { + name: author + }, + genre +}) { + return
    • ; +} + +export default () => { + const [result] = useQuery({ + query: getBooks + }); + + return ( +
    +

    Books

    + {process(result)} +
    + ); +}; diff --git a/client/src/index.html b/client/src/index.html index 71c49f8..0627862 100644 --- a/client/src/index.html +++ b/client/src/index.html @@ -1,5 +1,5 @@ - + @@ -8,7 +8,7 @@ - -
    + +
    diff --git a/client/src/index.js b/client/src/index.js index 6c589fc..1b39388 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { createClient, defaultExchanges, Provider } from 'urql'; -import App from './app'; +import App from './components/app'; const client = createClient({ url: 'http://localhost:4000/graphql', diff --git a/server/app.js b/server/app.js index a2440c5..b24261b 100644 --- a/server/app.js +++ b/server/app.js @@ -1,5 +1,6 @@ const express = require('express'); const graphqlHTTP = require('express-graphql'); +const cors = require('cors'); const mongoose = require('mongoose'); require('dotenv-safe').config(); @@ -15,6 +16,8 @@ mongoose.connection.once('open', () => { console.log('Connected to database.'); }); +app.use(cors({ origin: 'http://localhost:1234' })); + app.use('/graphql', graphqlHTTP({ schema, graphiql: true diff --git a/server/package-lock.json b/server/package-lock.json index 098167e..0eb3083 100644 --- a/server/package-lock.json +++ b/server/package-lock.json @@ -1,5 +1,5 @@ { - "name": "graphql-playground", + "name": "graphql-playground-server", "version": "1.0.0", "lockfileVersion": 1, "requires": true, @@ -245,6 +245,15 @@ "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" }, + "cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "requires": { + "object-assign": "^4", + "vary": "^1" + } + }, "create-error-class": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz", @@ -934,6 +943,11 @@ "path-key": "^2.0.0" } }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + }, "on-finished": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", diff --git a/server/package.json b/server/package.json index 92051af..9f035b2 100644 --- a/server/package.json +++ b/server/package.json @@ -18,6 +18,7 @@ }, "homepage": "https://github.com/seigler/graphql-playground#readme", "dependencies": { + "cors": "^2.8.5", "dotenv-safe": "^8.2.0", "express": "^4.17.1", "express-graphql": "^0.9.0",