joshua/graphql-playground
1
0
Fork 0
mirror of https://github.com/seigler/graphql-playground synced 2025-07-26 00:56:09 +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>
<html lang="en">
<html lang="en" class="text-gray-900 antialiased leading-tight">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -8,7 +8,7 @@
<script defer src="index.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="root"></div>
<body class="min-h-screen flex flex-col bg-gray-300">
<div class="my-auto" id="root"></div>
</body>
</html>

2
client/src/index.js
View file

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

3
server/app.js
View file

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

16
server/package-lock.json generated
View file

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

1
server/package.json
View file

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