joshua/graphql-playground
1
0
Fork 0
mirror of https://github.com/seigler/graphql-playground synced 2025-07-27 01:26: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>
<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',