reactjs - React Graphql Typescript - プロパティは型 '{}' に存在しません

私はシンプルなReact GraphQLアプリを作ろうとしています。MongoDBに接続するためにStrapiを使用しています。

すべて問題なく動作しており、私は単純にMongoDBで全ての本を取得するクエリで本の名前を表示しています

私の問題はTypeScriptにあります - Property does not exist on type '{}' というエラーが出ていて、正しく修正する方法が分かりません。

私はQueryコンポーネントを持っています

import React, { ReactElement } from 'react';
import { useQuery } from "@apollo/react-hooks";
import { DocumentNode } from 'graphql';

interface IProps{
    children(data:{}): ReactElement;
    query: DocumentNode
    id?: number
}

const Query = ({children, query, id}:IProps) => {
    const {data, loading, error} = useQuery(query, {
        variables:{id:id}
    })

    if(loading) return <p>loading</p>
    if(error) return <p>Error{JSON.stringify(error)}</p>
    return children({data})
}

export default Query

そしてシンプルなクエリ

import gql from 'graphql-tag';

export const GET_ALL_BOOKS = gql `
    query Books{
        books{
            name
            description
        }
    }
`

そして次に、App.tsx でクエリを呼び出し、書籍名を表示しています

ここでtypescriptエラーが出ています{({data: {fonts}}) => {

データに関して - プロパティ 'data' は型 '{}' には存在しません。ts(2339)

import React, { ReactElement } from 'react';
import Query from './utils/query'
import { GET_ALL_BOOKS } from './queries';
import {Books} from './generated/Books'
import { DocumentNode } from 'graphql';

interface BookProps{
  _id: string
  name: string
  description: string
}

interface IProps{
  children(data:{}): ReactElement;
  query: DocumentNode
  id?: number
}

interface Query{

}

const App:React.FC = () => {
  return (
    <div className="App">
      <h1>Books</h1>
      <Query query={GET_ALL_BOOKS}>
        {({data: {books}}) => { // typescript error here - Property 'data' does not exist on type '{}'.ts(2339)
          return(
            <ul>
            {books.map((book: { name: string; }, i: number) => {
              return(
                <li>{book.name}</li>
              )
            })}
            </ul>
          )
        }}
      </Query>
    </div>
  );
}

export default App;

私はクエリからも型を生成しています

/* tslint:disable */
/* eslint-disable */
// @generated
// This file was automatically generated and should not be edited.

// ====================================================
// GraphQL query operation: Books
// ====================================================

export interface Books_books {
  __typename: "Book";
  name: string | null;
  description: string | null;
}

export interface Books {
  bookds: (Books_books | null)[] | null;
}

このTypeScriptのエラーをどうやって直せますか