vseriousv
@vseriousv
Node.js-разработчик

Что это значит: TypeError: _ref.data is undefined?

Не могу разобраться в чем проблема, работаю с next.js. Пытаюсь добавить динамический контент, подгружаемый из БД. И делаю всё по интрукции, но мне постоянно выпадает ошибка. Главное то что она показывает мне на ошибку того что работает нормально.
Данный компонент находится в Header и поэтому присутствует на всех страницах. В этом компоненте происходит GraphQL запрос через apollo-client-server.
Вот весь код этого компонента:
import React, {Component} from 'react'
import { Query } from 'react-apollo'
import gql from 'graphql-tag'

export const allContactsQuery = gql`
query queryContacts {
  contacts{
     title
     type
     context_1
     context_2
  }
}
`

const Header_leftBlock =()=> (
    <Query query={allContactsQuery}>
         {({loading, error, data: { contacts } }) => {
            if (error) return `Error! ${error.message}`;
            if (loading) return <div>Loading</div>
            return (
              <div className="callBlock d-lg-flex">
                <div className='callMenu callMenuDesktop d-lg-block d-none'>
                 {contacts.map((contact, index) =>(
                    <a key={index} href={"tel:"+contact.context_1}><span><b>{contact.context_1}</b> {contact.context_2}</span><br /></a>
                 ))}
                </div>
              </div>
            )
         }}
    </Query>
)
export default Header_leftBlock;


Архитектура проекта стандарная для next.js:
Есть папка pages, где находятся все страницы, вот код pages/index.js
import App from '../components/App'
import Head from 'next/head'
import Header from '../components/Header/Header'
import Footer from '../components/Footer/Footer'
import SliderMainPage from  '../components/SliderMainPage/SliderMainPage'
import OurProduction from   '../components/OurProduction/OurProduction'
import AdvantagesBlock from '../components/AdvantagesBlock/AdvantagesBlock'
import Whatsnews from '../components/Whatsnews/Whatsnews'

import './index.less'


export default () => (
  <App>
    <Head>
      <title>Aidaprint | Главная страница</title>
    </Head>
    <Header />
    <SliderMainPage />
    <OurProduction />
    <AdvantagesBlock />
    <Whatsnews />
    <Footer />
  </App>
)

все что выше работает! Далее я создал там же папку "prints" и в ней папку "[name]" - все как по инструкции.
внутри файл index.js
import App from '../../../components/App'
import Head from 'next/head'
import { useRouter } from 'next/router'
import Header from '../../../components/Header/Header'
//import Footer from '../../../components/Footer/Footer'

import '../../index.less'

export default () => {
  const router = useRouter()
  const { name } = router.query
  return (
    <App>
      <Head>
        <title>Aidaprint | Продукция</title>
      </Head>
      <Header />
        <div className="hello_Two text-center"><h1>This is Page adress "{name}"</h1></div>
        <div className="hello_one text-center"><h2> At the moment the page is under construction!</h2></div>
    </App>
  )
}

А вот сама ошибка, которая выдается если перейти по адресу /prints/business_cards
5d3fbea2700ed476207753.png

Кто-нибудь сталкивался с такой проблемой?
  • Вопрос задан
  • 533 просмотра
Решения вопроса 2
RomReed
@RomReed
JavaScript, Flutter, ReactNative, Redux, Firebase
({loading,error,data})=>
попробуйте вот так
Ответ написан
Комментировать
vseriousv
@vseriousv Автор вопроса
Node.js-разработчик
В процессе решения данной задачи, нашел такое решение и заключалось оно, как не странно, именно в небольшой ошибке. А именно в неправильном использовании cors на API GrpaphQL-сервере:
Вот код который был на сервере
.......
app.use('/graphql', graphqlHTTP({
    schema,
    graphiql: true
}));

app.use(cors());
......


Я использовал cors, после самого запроса, почему-то мне казалось так логичным, хотя я на самом деле еще не до конца разобрался почему именно следующим образом работает, но именно таким образом у меня пропала данная ошибка:

.......
app.use(cors());

app.use('/graphql', cors(), graphqlHTTP({
    schema,
    graphiql: true
}));
......
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы