reactjs - React Graphql Typescript - Eigendom bestaat niet op type '{}'

Ik probeer een eenvoudige React GraphQL-app te maken, ik gebruik Strapi om te verbinden met een MongoDB.

Alles werkt goed en ik geef gewoon boeknamen weer met een query om alle boeken in de MongoDB te krijgen

Mijn probleem is met TypeScript - ik krijg een Eigenschap bestaat niet op type '{}' en ik kan niet uitvinden hoe ik het goed kan oplossen.

Ik heb een Query-component

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

En een eenvoudige query

import gql from 'graphql-tag';

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

En dan roep ik in App.tsx de query aan en toon ik de boeknamen

Ik krijg hier de TypeScript-fout {({data: {fonts}}) => {

over gegevens - Eigenschap 'data' bestaat niet op type '{}'.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;

Ik genereer ook types uit de query

/* 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;
}

Hoe kan ik deze typescript-fout oplossen