ApolloProvider не был передан клиентский экземпляр - React Native - PullRequest
Новая
       90

ApolloProvider не был передан клиентский экземпляр - React Native

3 голосов
/ 31 октября 2019

Я настроил свое приложение React Native с помощью GraphQL. Как только я запустил новый проект и следил за настройкой graphql с реагировать на нативный, я получил эту ошибку.

ApolloProvider не был передан клиентскому экземпляру. Удостоверьтесь, что вы передаете свой клиент через опору клиента

Я следовал этой документации сверху вниз.

apollo.js 

import {HttpLink} from 'apollo-link-http';
import {ApolloClient} from 'apollo-client';
import {InMemoryCache} from 'apollo-cache-inmemory';

const makeApolloClient = token => {
  // create an apollo link instance, a network interface for apollo client
  const link = new HttpLink({
    uri: `https://learn.hasura.io/graphql`,
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });
  // create an inmemory cache instance for caching graphql data
  const cache = new InMemoryCache();
  // instantiate apollo client with apollo link instance and cache instance
  const client = new ApolloClient({
    link,
    cache,
  });
  return client;
};
export default makeApolloClient;

App.js 

import React from 'react';
import AppContainer from '../routes/Routes';
import AsyncStorage from '@react-native-community/async-storage';
import {ApolloProvider} from 'react-apollo';
import makeApolloClient from '../apollo/apollo';

console.disableYellowBox = true;

class App extends React.Component {
  state = {
    client: null,
  };

  async componentDidMount() {
    // fetch session
    const session = await AsyncStorage.getItem('@todo-graphql:session');
    const sessionObj = JSON.parse(session);
    const {token, id} = sessionObj;
    // make apollo client with this session token
    const client = makeApolloClient(token);
    // start emitting events saying that the useri s online
    this.setState({client});
  }

  render() {
    return (
      <ApolloProvider client={this.state.client}>
        <AppContainer />
      </ApolloProvider>
    );
  }
}

export default App;

Ошибка

enter image description here

"apollo-cache-inmemory": "^1.6.3",
"apollo-client": "^2.6.4",
"apollo-link-http": "^1.5.16",
"react": "16.9.0",
"react-apollo": "^3.1.3",
"react-native": "0.61.3",

1 Ответ

0 голосов
/ 31 октября 2019

Визуализация вызывается до componentDidMount. Из-за этого экземпляр клиента будет нулевым во время первого рендеринга. Это вызывает ошибку. Измените метод рендеринга как 

render() {
  if(!this.state.client) {
    return <Text>Loading</Text>
  }
  return (
      <ApolloProvider client={this.state.client}>
        <AppContainer />
      </ApolloProvider>
    );
}
...