GraphQl в React как подключить к Laravel?

Question

[Eugene]

Есть Laravel приложение, в котором настроен Lighthouse.
Хочу подключить реакт к этому GraphQL API.
Установил apollo client в реакт, но нигде не найду, как подружить apollo и lighthouse.
P.S: когда использую хук useQuery и присваиваю константы data и loading АБСОЛЮТНО ВСЕ пропадает с сайта, то есть после перезагрузки или изменения данных на нем, он вообще перестает что либо отображать, НО в pgAdmin я вижу, что появляются запросы в БД.
Вот код компонента:

import React from "react";

import {useQuery} from "@apollo/client";

import Ads from  './../../../queries/js/Ads';

import {Container} from "react-bootstrap";


function Main()
{
    const {data, loading} = useQuery(Ads); //именно эта строка отключает весь сайт

        return(
                <div className="content">
                    <Container>
                        <table className="table-bordered table-primary table table-responsive">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Title</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table><code lang="javascript">

</code>
                    </Container>
                </div>
            )
}

export default Main;

Вот код запроса(находится в js файле)

import {gql} from '@apollo/client';
import client from "./client";

const query = gql`
    query Ads{
        ads{
            data{
                id
                title
            }
        }
    }
`

const Ads = client.query({query: query});

export default Ads;

Answer 1

[Антон Горецкий]

const {data, loading} = useQuery(Ads); //именно эта строка отключает весь сайт

должно быть так

const [data, loading] = useQuery(Ads); //деструктуризация в массив, а не объект

Comments

[Eugene]

И это также не помогает, может ошибка в самом запросе или в конфигурации GraphQl?

[GlazOtca]

Eugene, заглянул в доку - там действительно объект, но 3 параметра

const { loading, error, data } = useQuery(EXCHANGE_RATES);

возможно, ваша ошибка из-за аргумента Ads, что за код в файле './../../../queries/js/Ads' ?

[GlazOtca]

Eugene, Если второй файл Ads, с запросом, то в чего вы его оборачиваете?
const Ads = client.query({query: query});
Подозреваю, что из-за оборачивания запроса возникают проблемы. В документации, экспортируется и используется чистый запрос.