使用带有Apollo挂钩的GraphQL片段时出错

我正在做一个NextJS项目，使用Strapi作为CMS，GraphQL插件和Apollo作为GraphQL客户端。我的问题与阿波罗·胡克斯有关。我尝试将查询片段与新的useQuery挂钩一起使用，但没有成功

在GraphQL游乐场上测试我的查询，一切正常-正确返回数据，如下所示：

但是，通过在项目中移植这一个，它在Apollo客户端中生成了500个网络错误，如下所示：

Error while running `getDataFromTree` { Error: Network error: Response not successful: Received status code 500
    at new ApolloError (/Users/lucacattide/Vagrant/debian/public/LC/front-end/node_modules/apollo-client/bundle.umd.js:92:26)
    at /Users/lucacattide/Vagrant/debian/public/LC/front-end/node_modules/apollo-client/bundle.umd.js:1587:34
    at /Users/lucacattide/Vagrant/debian/public/LC/front-end/node_modules/apollo-client/bundle.umd.js:2007:15
    at Set.forEach (<anonymous>)
    at /Users/lucacattide/Vagrant/debian/public/LC/front-end/node_modules/apollo-client/bundle.umd.js:2005:26
    at Map.forEach (<anonymous>)
    at QueryManager.broadcastQueries (/Users/lucacattide/Vagrant/debian/public/LC/front-end/node_modules/apollo-client/bundle.umd.js:2003:20)
    at /Users/lucacattide/Vagrant/debian/public/LC/front-end/node_modules/apollo-client/bundle.umd.js:1482:29
    at process._tickCallback (internal/process/next_tick.js:68:7)
  graphQLErrors: [],
  networkError:
   { ServerError: Response not successful: Received status code 500
       at Object.exports.throwServerError (/Users/lucacattide/Vagrant/debian/public/LC/front-end/node_modules/apollo-link-http-common/lib/index.js:23:17)
       at /Users/lucacattide/Vagrant/debian/public/LC/front-end/node_modules/apollo-link-http-common/lib/index.js:48:21
       at process._tickCallback (internal/process/next_tick.js:68:7)
     name: 'ServerError',
     response:
      Response {
        size: 0,
        timeout: 0,
        [Symbol(Body internals)]: [Object],
        [Symbol(Response internals)]: [Object] },
     statusCode: 500,
     result: { errors: [Array] } },
  message:
   'Network error: Response not successful: Received status code 500',
  extraInfo: undefined }

质疑

碎片

下一页

产生错误的原因是什么？ 这是我使用这些技术的第一个项目，所以我可能遗漏了一些东西

---

提前感谢您的帮助。

问题已解决。这是由PagesFragmentHome片段声明中的愚蠢语法错误引起的。将其替换为：

PagesFragmentsHome

一切正常

// Module Start
// JS imports
import gql from 'graphql-tag';
import Pages from './fragments/pages';

// Queries
// Page
const PAGE_QUERY = gql`
  query Pages($where: JSON, $isHome: Boolean!) {
    pages(where: $where) {
      ...PagesFragmentsPage
      ...PagesFragmentsHome @include(if: $isHome)
    }
  }

  ${Pages.fragments.page}
  ${Pages.fragments.home}
`;

// Module export
export default PAGE_QUERY;
// Module end

// Module Start
// JS imports
import gql from 'graphql-tag';

// Fragments
const Pages = {};

// Pages
Pages.fragments = {
  page: gql`
    fragment PagesFragmentsPage on Page {
      id
      name_en
      keywords_en
      description_en
    }
  `,
  home: gql`
    fragment PagesFragmentHome on Page {
      headline_en
      cta_en
      cta_two_en
      cta_three_en
      cta_four_en
      cta_five_en
      summary_title_en
      summary_en
      headline_two_en
      headline_three_en
      headline_four_en
      headline_five_en
      section_title_en
      indicators {
        id
        value
        label_en
      }
      testimonials {
        id
        name
        quote_en
      }
    }
  `,
};

// Module export
export default Pages;
// Module End

// Module Start
// Home
// Various imports...
// JS imports
import dynamic from 'next/dynamic'
import {useQuery} from '@apollo/react-hooks'
import PAGE_QUERY from '../backend/queries/pages'

const ErrorDb = dynamic(() =>
  import('../components/ErrorDb')
)
// Main
const Index = ({origin, pathname}) => {
  const {loading, error, data} = useQuery(PAGE_QUERY, {
    variables: {
      where: {
        name_en: 'Home'
      },
      isHome: true
    }
  });
  const {pages} = data;

  // Exception check
  if (error) {
    return <ErrorDb />
  }
  // DB fetching check
  if (loading) {
    return null;
  }

  return (
    <>
      // Implementation...
    </>
  );
}

// Module export
export default Index
// Module End

PagesFragmentsHome