Не могу разобраться в чем проблема, работаю с 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
Кто-нибудь сталкивался с такой проблемой?
