joshua/graphql-playground
1
0
Fork 0
mirror of https://github.com/seigler/graphql-playground synced 2025-07-26 17:16:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: client retrieves data from GraphQL

Browse source
This commit is contained in:
Joshua Seigler 2020-01-31 00:54:13 -05:00
parent 7bc3484b71
commit c333883162
9 changed files with 85 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

3
client/src/app.js
View file

@ -1,3 +0,0 @@
import React from 'react';
export default () => <div>Hi</div>;

4
client/src/components/app.js Normal file
View file

@ -0,0 +1,4 @@
import React from 'react';
import Booklist from './booklist';
export default () => <Booklist />;

8
client/src/components/book.js Normal file
View file

@ -0,0 +1,8 @@
import React from 'react';
export default ({ id, title, author, genre }) => (
<div className='flex flex-row my-1'>
<div className='flex-grow'>{title}<span className='text-gray-600'> - {author}</span></div>
<div className='text-gray-600'>{genre}</div>
</div>
);

50
client/src/components/booklist.js Normal file
View file

@ -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 (
<ul>
{result.data.books.map(mapBooks)}
</ul>
);
}
function mapBooks ({
id,
name: title,
author: {
name: author
},
genre
}) {
return <li key={id}><Book {...{ id, title, author, genre }} /></li>;
}
export default () => {
const [result] = useQuery({
query: getBooks
});
return (
<div className='m-auto m-4 p-4 max-w-sm rounded shadow-lg bg-gray-100'>
<h1 className='text-2xl font-bold'>Books</h1>
{process(result)}
</div>
);
};

6
client/src/index.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="text-gray-900 antialiased leading-tight">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -8,7 +8,7 @@
<script defer src="index.js"></script> <script defer src="index.js"></script>
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
</head> </head>
<body> <body class="min-h-screen flex flex-col bg-gray-300">
<div id="root"></div> <div class="my-auto" id="root"></div>
</body> </body>
</html> </html>

2
client/src/index.js
View file

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { createClient, defaultExchanges, Provider } from 'urql'; import { createClient, defaultExchanges, Provider } from 'urql';
import App from './app'; import App from './components/app';
const client = createClient({ const client = createClient({
url: 'http://localhost:4000/graphql', url: 'http://localhost:4000/graphql',

3
server/app.js
View file

@ -1,5 +1,6 @@
const express = require('express'); const express = require('express');
const graphqlHTTP = require('express-graphql'); const graphqlHTTP = require('express-graphql');
const cors = require('cors');
const mongoose = require('mongoose'); const mongoose = require('mongoose');
require('dotenv-safe').config(); require('dotenv-safe').config();
@ -15,6 +16,8 @@ mongoose.connection.once('open', () => {
console.log('Connected to database.'); console.log('Connected to database.');
}); });
app.use(cors({ origin: 'http://localhost:1234' }));
app.use('/graphql', graphqlHTTP({ app.use('/graphql', graphqlHTTP({
schema, schema,
graphiql: true graphiql: true

16
server/package-lock.json generated
View file

@ -1,5 +1,5 @@
{ {
"name": "graphql-playground", "name": "graphql-playground-server",
"version": "1.0.0", "version": "1.0.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
@ -245,6 +245,15 @@
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
"integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" "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": { "create-error-class": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz", "resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz",
@ -934,6 +943,11 @@
"path-key": "^2.0.0" "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": { "on-finished": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",

1
server/package.json
View file

@ -18,6 +18,7 @@
}, },
"homepage": "https://github.com/seigler/graphql-playground#readme", "homepage": "https://github.com/seigler/graphql-playground#readme",
"dependencies": { "dependencies": {
"cors": "^2.8.5",
"dotenv-safe": "^8.2.0", "dotenv-safe": "^8.2.0",
"express": "^4.17.1", "express": "^4.17.1",
"express-graphql": "^0.9.0", "express-graphql": "^0.9.0",