Cannot destructure GraphQL query as apollo-client is undefined?

Question

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?

Answer 1

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>;
}