Graphql，React - TypeError：无法读取未定义的属性“地图”

Question

我有一个 React 应用程序的简单演示，用于显示一个简单的食谱列表

我让这一切正常工作，但它突然停止了，我得到了这个控制台

TypeError: Cannot read property 'map' of undefined

在操场上一切正常，所以我认为它一定是 React 方面的东西

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';

import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { HttpLink } from 'apollo-link-http'
import { ApolloClient } from 'apollo-client'
import { ApolloProvider } from 'react-apollo'
import { ApolloProvider as ApolloProviderHooks } from 'react-apollo-hooks'

const cache = new InMemoryCache()
const link = new HttpLink({
  uri: 'http://locahost:4000'
})

const client = new ApolloClient({
  cache,
  link
})

const Root = () => (
  <Router>
    <Switch>
      <Route path='/' component={App} />
      <Redirect to='/' />
    </Switch>
  </Router>
)


ReactDOM.render(
  <ApolloProvider client={client}>
    <ApolloProviderHooks client={client}>
      <Root />
    </ApolloProviderHooks>
  </ApolloProvider>
  , document.getElementById('root'));

查询/index.tsx

export const GET_ALL_RECIPES = gql`
  query RecipeData{
    recipe{
      _id
      name
      description
    }
  }
`

生成/RecipeData.tsx

export interface RecipeData_recipe {
  __typename: "Recipe";
  _id: string | null;
  name: string | null;
  description: string | null;
}

export interface RecipeData {
  recipe: (RecipeData_recipe | null)[] | null;

App.tsx

import React from 'react';
import './App.css';

import { RecipeData } from '../generated/RecipeData';
import { GET_ALL_RECIPES } from '../queries';
import { useQuery } from 'react-apollo-hooks';


const App: React.FC = () => {

  const { data, loading } = useQuery<RecipeData | null>(GET_ALL_RECIPES, {
    suspend: false
  })

  if (loading || !data) return <div>Loading</div>

  return (
    <div className="App">
      <ul>
        {
          data.recipe !== null && data.recipe.map(recipe => (
            <li>{recipe.name}</li>
          ))
        }
      </ul>

    </div>
  );
}

export default App;

useQuery 的错误是

Error: Network error: Failed to fetch
    at new ApolloError (ApolloError.ts:46)
    at ObservableQuery.getCurrentResult (ObservableQuery.ts:199)
    at useQuery.js:65
    at updateMemo (react-dom.development.js:16854)
    at Object.useMemo (react-dom.development.js:17334)
    at useMemo (react.development.js:1643)
    at useQuery (useQuery.js:57)
    at App (App.tsx:8)
    at renderWithHooks (react-dom.development.js:16260)
    at updateFunctionComponent (react-dom.development.js:18347)
    at beginWork$1 (react-dom.development.js:20176)
    at beginWork$$1 (react-dom.development.js:25756)
    at performUnitOfWork (react-dom.development.js:24695)
    at workLoopSync (react-dom.development.js:24671)
    at performSyncWorkOnRoot (react-dom.development.js:24270)
    at react-dom.development.js:12199
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$2 (react-dom.development.js:12149)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12194)
    at flushSyncCallbackQueue (react-dom.development.js:12182)
    at scheduleUpdateOnFiber (react-dom.development.js:23709)
    at dispatchAction (react-dom.development.js:17076)
    at useQuery.js:109
    at actHack (actHack.js:2)
    at Object.invalidateCurrentResult (useQuery.js:108)
    at notifySubscription (Observable.js:140)
    at onNotify (Observable.js:179)
    at SubscriptionObserver.error (Observable.js:240)
    at ObservableQuery.ts:701
    at Array.forEach (<anonymous>)
    at iterateObserversSafely (ObservableQuery.ts:701)
    at Object.onError [as error] (ObservableQuery.ts:627)
    at invoke (QueryManager.ts:518)
    at QueryManager.ts:576
    at QueryManager.ts:1091
    at Set.forEach (<anonymous>)
    at QueryManager.ts:1087
    at Map.forEach (<anonymous>)
    at QueryManager.broadcastQueries (QueryManager.ts:1085)
    at QueryManager.ts:434

任何人都可以看到我做错了什么

Answer 1

尝试改变：

data.recipe !== null && data.recipe.map(recipe => (

到：

data.recipe && data.recipe.map(recipe => (

这将包括 null 和未定义的检查。

Answer 2

data在请求过程中遇到网络错误，无法得到响应时，将是未定义的。检查钩子返回的error 对象，或查看浏览器开发工具中服务器的原始响应，以确定实际错误是什么。