Cannot destructure GraphQL query as apollo-client is undefined?-CodePudding

I am looking to debug an issue pertaining to the error message:

Uncaught TypeError: Cannot destructure property 'slumpMedias' of '(0 , apollo_client__WEBPACK_IMPORTED_MODULE_4_.useQuery)(...)' as it is undefined.

Context:

I am in the process of setting up the backend for my React.js project, I am using WordPress and GraphQl as Headless CMS. As far as I am aware my app has been set up correctly, I am utilising Apollo client and gql to make my queries.

Here is the code at last working iteration:

import { useQuery } from "@apollo/client";
import gql from "graphql-tag";

const GET_ALL_MEDIA = gql`
  query MyQuery {
    slumpMedias(first: 100) {
      edges {
        node {
          title
          slumpMeta {
            image {
              mediaItemUrl
            }
            audio1 {
              mediaItemUrl
            }
          }
        }
      }
    }
  }
`;

function Items() {

  const { loading, error, data } = useQuery(GET_ALL_MEDIA);
  console.log(data);

  if (loading) return <h1>Loading..</h1>;
  if (error) return <h1>Loading..</h1>;

  return <div>Hello</div>;
}

The output of data to the console looks like this:

>slumpMedias: {…}}
 >slumpMedias: 
    >edges: (17) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] 
     >[[Prototype]]: Object
  >[[Prototype]]: Object

The Problem:

Now that I am making a successful API call, I would like to destructure my object into cleaner, more manageable pieces. Again, I am basically certain that I am doing this correctly.

Here is the new query:

  const {
    loading,
    error,
    data: {
      slumpMedias: { edges },
    },
  } = useQuery(GET_ALL_MEDIA);

 console.log(edges);

I can almost be certain, because when I make this update to my code and save my new file the browser automatically updates and I can see the output of edges from the console which is expected behaviour

Here:

(17) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

When I refresh the page however I am met with a successful compile but a totally white screen. The error output reads as follows:

Items.js:34 Uncaught TypeError: Cannot destructure property 'slumpMedias' of '(0 , _apollo_client__WEBPACK_IMPORTED_MODULE_4__.useQuery)(...)' as it is undefined.
    at Items (Items.js:34:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at mountIndeterminateComponent (react-dom.development.js:20913:1)
    at beginWork (react-dom.development.js:22416:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
    at invokeGuardedCallback (react-dom.development.js:4274:1)
    at beginWork$1 (react-dom.development.js:27405:1)
    at performUnitOfWork (react-dom.development.js:26513:1)
    at workLoopSync (react-dom.development.js:26422:1)

I have attempted to do some research following some resolutions, following the advice from here and here which advise referencing the graphql-tag library however, I have already attempted this as demonstrated.

Does anyone know what the issue may be?

CodePudding user response：

data is undefined while the query is still loading or has an error. You cannot immediately destructure before checking those, unless you use a default value.

So write

function Items() {

  const { loading, error, data } = useQuery(GET_ALL_MEDIA);
  console.log(loading, error, data);

  if (loading) return <h1>Loading...</h1>;
  if (error) return <h1>Ooops.</h1>;

  const { slumpMedias: { edges } } = data;
  console.log(edges);
  return <div>Hello</div>;
}