query.js

import React from 'react';
import { Query } from '@loona/react';

import { List } from '../common/List';

const ALL_BOOKS = gql`
  query GetAllBooks {
    books @client {
      id
      title
    }
  }
`;

export function BooksList() {
  return (
    <Query query={ALL_BOOKS}>
      {({ data, loading }) => {
        if (loading) return '...';

        return <List list={data.books} />;
      }}
    </Query>
  );
}