Почему Гэтсби возвращает неопределенное значение при поиске из Wordpress Media (allWordpressWpMedia)?

Question

В настоящее время я пытаюсь создать сайт Gatsby Stati c, который будет получать изображения из Wordpress, в частности, раздел СМИ. Я уже успешно интегрировал Wordpress с Gatsby. js, используя gatsby-source-wordpress. Даже использование запроса GraphQL на allWordpressWpMe прошло успешно.

В моем обозревателе GraphQL я ясно вижу, что данные поступают через (изображение ниже). Но по какой-то причине, когда я пытаюсь получить данные из запроса, Гэтсби возвращает «undefined». В частности, ошибка «TypeError: Невозможно прочитать свойство'dge 'undefined".

Вот мой запрос GraphQL:

Запрос GraphQL

My gatsby-config.js:

module.exports = {
  siteMetadata: {
    ...config,
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-catch-links',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'posts',
        path: `${__dirname}/content/posts`,
      },
    },
    {
      resolve: 'gatsby-source-wordpress',
      options: {
        baseUrl: 'zuoartstudios.wordpress.com',
        protocol: 'https',
        hostingWPCOM: true,
        useACF: false,
        auth: {
          wpcom_app_clientSecret: 'WcNGhgwgd3NjLq3CEJeZUI7XfXMtKyCb43jsBpapUVNw5RSzo7LQiUQ3GqAYpRu8',
          wpcom_app_clientId: '68277',
          wpcom_user: 'jerrytigerxu',
          wpcom_pass: 'rabbit168Win',
        },
        verboseOutput: false,
      }
    },
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 750,
              quality: 90,
              linkImagesToOriginal: true,
            },
          },
          'gatsby-remark-prismjs',
        ],
      },
    },
    {
      resolve: 'gatsby-plugin-emotion',
      options: {
        autoLabel: process.env.NODE_ENV !== 'production',
        // eslint-disable-next-line
        labelFormat: `[filename]--[local]`,
      },
    },
    {
      resolve: 'gatsby-plugin-typography',
      options: {
        pathToConfigModule: 'config/typography.js',
      },
    },
    'gatsby-plugin-sharp',
    'gatsby-plugin-sitemap',
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: config.title,
        short_name: config.shortName,
        description: config.description,
        start_url: config.pathPrefix,
        background_color: config.backgroundColor,
        theme_color: config.themeColor,
        display: 'standalone',
        icon: config.favicon,
      },
    },
    'gatsby-plugin-offline',
  ],
};

Вот файл .jsx, который я пытаюсь получить для изображений:

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby'
import Helmet from 'react-helmet';
import PropTypes from 'prop-types';
import { Header } from 'components';
import { Layout, Container } from 'layouts';




const About = (center) => {


  const {
      allWordpressWpMedia: { edges },
    } = graphql`
      {
         allWordpressWpMedia {
            edges {
              node {
                id
                alt_text
                date
                slug
                localFile {
                  childImageSharp {
                    fluid(maxWidth: 800) {
                      ...GatsbyImageSharpFluid
                    }
                  }
                }
              }
            }
        }

      }

  `;




  return (
      <Layout>
        <Helmet title={'About Page'} />
        <Header title="About Page">Gatsby Tutorial Starter</Header>
        <Container center={center}>

            {/*{edges.map(({node}) =>
            <Img
            fluid={image.node.localFile.childImageSharp.fluid}
            alt={alt}
            style={{
              width: width ? width + 'px' : '100%',
              maxWidth: '100%'
            }}/>
          )}
          */}


        </Container>
      </Layout>
);

};

export default About;

About.propTypes = {
  center: PropTypes.object,
};




const allMedia = graphql`
  query {
    allWordpressWpMedia {
      edges {
        node {
          source_url
          localFile {
            publicURL
            childImageSharp {
              fluid(maxWidth: 800) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  }
`;

Полная ошибка:

About
src/pages/artwork.jsx:1
> 1 | import React from 'react';
  2 | import { useStaticQuery, graphql } from 'gatsby'
  3 | import Helmet from 'react-helmet';
  4 | import PropTypes from 'prop-types';
View compiled
renderWithHooks
node_modules/react-dom/cjs/react-dom.development.js:15105
  15102 |   }
  15103 | }
  15104 | 
> 15105 | var children = Component(props, refOrContext);
  15106 | 
  15107 | if (didScheduleRenderPhaseUpdate) {
  15108 |   do {
View compiled
updateFunctionComponent
node_modules/react-dom/cjs/react-dom.development.js:16922
  16919 | {
  16920 |   ReactCurrentOwner$3.current = workInProgress;
  16921 |   setCurrentPhase('render');
> 16922 |   nextChildren = renderWithHooks(current$$1, workInProgress, Component, nextProps, context, renderExpirationTime);
  16923 |   if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) {
  16924 |     // Only double-render components with Hooks
  16925 |     if (workInProgress.memoizedState !== null) {
View compiled
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js:18495
  18492 |     var _Component = workInProgress.type;
  18493 |     var unresolvedProps = workInProgress.pendingProps;
  18494 |     var resolvedProps = workInProgress.elementType === _Component ? unresolvedProps : resolveDefaultProps(_Component, unresolvedProps);
> 18495 |     return updateFunctionComponent(current$$1, workInProgress, _Component, resolvedProps, renderExpirationTime);
  18496 |   }
  18497 | case ClassComponent:
  18498 |   {
View compiled
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:348
  345 |     window.event = windowEvent;
  346 |   }
  347 | 
> 348 |   func.apply(context, funcArgs);
  349 |   didError = false;
  350 | }
  351 | 
View compiled
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:398
  395 | // Synchronously dispatch our fake event. If the user-provided function
  396 | // errors, it will trigger our global error handler.
  397 | evt.initEvent(evtType, false, false);
> 398 | fakeNode.dispatchEvent(evt);
  399 | 
  400 | if (windowEventDescriptor) {
  401 |   Object.defineProperty(window, 'event', windowEventDescriptor);
View compiled
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:455
  452 | function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) {
  453 |   hasError = false;
  454 |   caughtError = null;
> 455 |   invokeGuardedCallbackImpl$1.apply(reporter, arguments);
  456 | }
  457 | 
  458 | /**
View compiled
beginWork$$1
node_modules/react-dom/cjs/react-dom.development.js:23214
  23211 | }
  23212 | 
  23213 | // Run beginWork again.
> 23214 | invokeGuardedCallback(null, beginWork$1, null, current$$1, unitOfWork, expirationTime);
  23215 | 
  23216 | if (hasCaughtError()) {
  23217 |   var replayError = clearCaughtError();
View compiled
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:22208
  22205 |   next = beginWork$$1(current$$1, unitOfWork, renderExpirationTime);
  22206 |   stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true);
  22207 | } else {
> 22208 |   next = beginWork$$1(current$$1, unitOfWork, renderExpirationTime);
  22209 | }
  22210 | 
  22211 | resetCurrentFiber();
View compiled
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js:22182
  22179 | function workLoopSync() {
  22180 |   // Already timed out, so perform work without checking if we need to yield.
  22181 |   while (workInProgress !== null) {
> 22182 |     workInProgress = performUnitOfWork(workInProgress);
  22183 |   }
  22184 | }
  22185 | 
View compiled
renderRoot
node_modules/react-dom/cjs/react-dom.development.js:21875
  21872 | do {
  21873 |   try {
  21874 |     if (isSync) {
> 21875 |       workLoopSync();
  21876 |     } else {
  21877 |       workLoop();
  21878 |     }
View compiled
runRootCallback
node_modules/react-dom/cjs/react-dom.development.js:21551
  21548 | var prevCallbackNode = root.callbackNode;
  21549 | var continuation = null;
  21550 | try {
> 21551 |   continuation = callback(isSync);
  21552 |   if (continuation !== null) {
  21553 |     return runRootCallback.bind(null, root, continuation);
  21554 |   } else {
View compiled
(anonymous function)
node_modules/react-dom/cjs/react-dom.development.js:11354
  11351 |   for (; i < queue.length; i++) {
  11352 |     var callback = queue[i];
  11353 |     do {
> 11354 |       callback = callback(_isSync);
  11355 |     } while (callback !== null);
  11356 |   }
  11357 | });
View compiled
unstable_runWithPriority
node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js:643
  640 | currentPriorityLevel = priorityLevel;
  641 | 
  642 | try {
> 643 |   return eventHandler();
  644 | } finally {
  645 |   currentPriorityLevel = previousPriorityLevel;
  646 | }
View compiled
runWithPriority$2
node_modules/react-dom/cjs/react-dom.development.js:11306
  11303 | 
  11304 | function runWithPriority$2(reactPriorityLevel, fn) {
  11305 |   var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);
> 11306 |   return Scheduler_runWithPriority(priorityLevel, fn);
  11307 | }
  11308 | 
  11309 | function scheduleCallback(reactPriorityLevel, callback, options) {
View compiled
flushSyncCallbackQueueImpl
node_modules/react-dom/cjs/react-dom.development.js:11350
  11347 | try {
  11348 |   var _isSync = true;
  11349 |   var queue = syncQueue;
> 11350 |   runWithPriority$2(ImmediatePriority, function () {
  11351 |     for (; i < queue.length; i++) {
  11352 |       var callback = queue[i];
  11353 |       do {
View compiled
flushSyncCallbackQueue
node_modules/react-dom/cjs/react-dom.development.js:11339
  11336 |   if (immediateQueueCallbackNode !== null) {
  11337 |     Scheduler_cancelCallback(immediateQueueCallbackNode);
  11338 |   }
> 11339 |   flushSyncCallbackQueueImpl();
  11340 | }
  11341 | 
  11342 | function flushSyncCallbackQueueImpl() {
View compiled
scheduleUpdateOnFiber
node_modules/react-dom/cjs/react-dom.development.js:21428
  21425 |       // scheduleCallbackForFiber to preserve the ability to schedule a callback
  21426 |       // without immediately flushing it. We only do this for user-initiated
  21427 |       // updates, to preserve historical behavior of sync mode.
> 21428 |       flushSyncCallbackQueue();
  21429 |     }
  21430 |   }
  21431 | } else {
View compiled
enqueueForceUpdate
node_modules/react-dom/cjs/react-dom.development.js:13146
  13143 |       flushPassiveEffects();
  13144 |     }
  13145 |     enqueueUpdate(fiber, update);
> 13146 |     scheduleWork(fiber, expirationTime);
  13147 |   }
  13148 | };
  13149 | 
View compiled
ExportedComponent../node_modules/react/cjs/react.development.js.Component.forceUpdate
node_modules/react/cjs/react.development.js:343
  340 |  * @protected
  341 |  */
  342 | Component.prototype.forceUpdate = function (callback) {
> 343 |   this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
  344 | };
  345 | 
  346 | /**
View compiled
(anonymous function)
node_modules/react-hot-loader/dist/react-hot-loader.development.js:2987
  2984 |       console.error(e);
  2985 |     }
  2986 |     module.instances.forEach(function (inst) {
> 2987 |       return inst.forceUpdate();
  2988 |     });
  2989 |   });
  2990 | };
View compiled
(anonymous function)
node_modules/react-hot-loader/dist/react-hot-loader.development.js:2986
  2983 |     console.error('React-Hot-Loader: error detected while loading', moduleId);
  2984 |     console.error(e);
  2985 |   }
> 2986 |   module.instances.forEach(function (inst) {
  2987 |     return inst.forceUpdate();
  2988 |   });
  2989 | });