У меня есть имя компонента — код Graph.js, указанный ниже:
import React, { Component } from "react";
import { View, Text } from "react-native";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import Launches from "./Launches.js";
const client = new ApolloClient({
uri: "http://127.0.0.1:4000/graphql"
});
export default class Graph extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<ApolloProvider client = {client}>
<View>
<Text>Hello Apillo</Text>
</View>
<Launches />
</ApolloProvider>
);
}
}
И другое имя файла — код Launcher.js, указанный ниже:
import React, { Component } from "react";
import { View, Text } from "react-native";
import gql from "graphql-tag";
import { Query } from "react-apollo";
const LAUNCHES_QUERY = gql`
query LaunchesQuery {
launches {
flight_number
mission_name
}
}
`;
export default class Launches extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<View>
<Query query = {LAUNCHES_QUERY}>
{({ loading, error, data }) => {
if (loading) return <Text>Loading...</Text>;
if (error) return console.info(error);
let length = data.length;
console.info(data);
return <Text>Launches</Text>;
}}
</Query>
</View>
);
}
}
Я установил graphql setup на своем локальном хосте, и он хорошо работал в http://localhost:4000/graphql.
Когда я вызываю URI из реагирующего приложения, возникают ошибки.
Ошибка1: Сетевая ошибка: сетевой запрос не выполнен
Ошибка2: Нарушение инварианта: Query(...): От рендеринга ничего не возвращено. Обычно это означает, что оператор return отсутствует. Или, чтобы ничего не отображать, верните null.
Я также пытался изменить URI http://localhost и передать http://127.0.0.1
Заранее спасибо
@GuruparanGiritharan хорошо, я проверю





Компонент Query должен быть за пределами , это будет:
...
render() {
return (
<Query query = {LAUNCHES_QUERY}>
{({ loading, error, data }) => {
if (loading) return <Text>Loading...</Text>;
if (error) return console.info(error);
let length = data.length;
console.info(data);
return <Text>Launches</Text>;
}}
</Query>
);
}
...
Ответ Дюверни, возможно, был полезен для других, но у меня была эта проблема и в веб-приложении React, и лекарство заключалось в том, чтобы специально возвращать null, если данных нет. Если вы вернете пустую строку, произойдет сбой. Обертывание возвращаемого значения в JSX также решает проблему. Надеюсь, это сэкономит кому-то еще несколько минут.
Привет, Бен, не могли бы вы привести пример? Я схожу с ума от той же ошибки, и мой синтаксис возврата выглядит правильно... Заранее спасибо!
Я думаю, мне нужно увидеть ваш код, чтобы показать что-нибудь полезное. Что именно вы возвращаете из функции рендеринга? Ничего не вернуть (undefined), но можно вернуть null.
@joeCarpenter проверьте эту функцию рендеринга и то, как обрабатываются данные, и кодируются все возможные сценарии возврата: github.com/tehpsalmist/play-the-mind/blob/…
Спасибо, Бен, это ссылка на вопрос, который я разместил: stackoverflow.com/questions/58785332/…
Попробуйте с ip машины