Как использовать client.query без компонентов JSX в Apollo Client?
Я пытаюсь сделать запрос в Apollo Client с помощью React, не возвращая компонент JSX, а просто объект (объект data, полученный при выполнении общего запроса к серверу Apollo).
Я пытался использовать компонент <Query />, но он возвращает мне узел React, и мне нужен только объект. Документация только объясняет методы, которые возвращают компоненты JSX в какой-то момент, когда все, что я хочу сделать, это отправить запрос и обработать ответ в обратном вызове.
На самом деле я пытаюсь так (я использую TypeScript в React):
import React from 'react';
import { withApollo } from 'react-apollo';
import gql from 'graphql-tag';
const MY_QUERY = gql`
query MY_QUERY {
myQuery {
attr1
attr2
}
}
`;
const res = ({ client }: { client: any }) =>
client
.query(MY_QUERY)
.then((data: { data: any }) => data);
withApollo(res);
console.info(res);
При этом я ищу такой объект, как
{
"data": {
"myQuery": [
{
"attr1": "something 1...",
"attr2": "another thing 1..."
},
{
"attr1": "something 2...",
"attr2": "another thing 2..."
},
{
"attr1": "something 3...",
"attr2": "another thing 3..."
}
]
}
}
Но то, что я получаю от браузера,
ƒ WithApollo(props) {
var _this = _super.call(this, props) || this;
_this.setWrappedInstance = _this.setWrappedInstance.bind(_this);
return _this;
}
Любое предложение?
Пожалуйста, отредактируйте свой вопрос и отформатируйте свой код внутри него, а не отправляйте его в виде комментария.
В порядке! Я только что вставил свой код
Это действительно странный синтаксис запроса gql, работает ли он на игровой площадке GQL? Можете ли вы показать мне часть JSX, которая использует результат, я покажу вам, как использовать узел Query, это довольно просто
Хорошо, я обновил код до реального способа, которым я это делаю.
Пожалуйста, отредактируйте свой вопрос, если вы хотите добавить соответствующий код, это действительно трудно читать
Хорошо, давайте забудем о вашем запросе, что вы собираетесь делать с полученными данными?
Я только что обновился! Извините за это, ха-ха. Я также пробовал в Graphiql, и запрос работает отлично
Мне нужно, чтобы он был в массиве объектов, чтобы затем передать его в оболочку React Router.
Ммм, не могли бы вы вставить класс, генерирующий оболочку. Распечатайте пример данных, которые вы получите, и полученный JSX, который вы хотите получить.
Почему вы откатили мою правку?
Было ошибкой. Я только что обновил ответ, который я ищу
Ответы 1
Попробуйте это вместо
class anyComponent extends React.Component<Props> {
state = {
results: null,
}
componentDidMount = async () => {
const {client} = this.props;
res = await client.query({query: MY_QUERY});
console.info(res);
this.setState({results: res})
}
render() {
// check if any results exist (just an example)
return results ? <AnyJsx results = {results}/> : null;
}
}
export default withApollo(anyComponent);
Вы записывали функцию в консоль, а не вызывали ее, чтобы получить результат.
Вам могут понадобиться некоторые функции жизненного цикла, такие как componentDidMount, для извлечения данных.
Спасибо Рашид! Я обновил код вашим ответом, но теперь TypeScript говорит мне, что withApollo не ожидает получения обещания в качестве параметра
ошибка: Аргумент типа '({ client }: { client: any; }) => Promise <any>' не может быть назначен параметру типа 'ComponentType<WithApolloClient<{ client: any; }>>'.
@ClementeSerranoSutil, проверьте, я обновил ответ.
@ClementeSerranoSutil дайте мне знать, если это поможет. если вы хотите добавить свою логику в методы жизненного цикла, JSX вам не поможет. вам нужно будет использовать HOC withApollo.
Каким будет клиент? Я использую Gatsby, который использует graphql во время сборки, и я не думаю, что у него есть клиент для запроса, или я думаю, что клиент может быть локальным?
Я задал сопутствующий вопрос, если вам интересно
Пожалуйста, опубликуйте код, который у вас есть в настоящее время. stackoverflow.com/help/mcve необходим для проблем с кодом. Неясно, как сейчас выглядит ваш код, но вполне вероятно, что компонент необходимо использовать каким-либо образом, потому что именно так вещи взаимодействуют в React.