TypeError: Cannot destructure property 'metadata' of 'global.attributes'

[Qurus]

error - pages/_app.js (24:10) @ MyApp
TypeError: Cannot destructure property 'metadata' of 'global.attributes' as it is undefined.
22 | }
23 |

24 | const { metadata, favicon, metaTitleSuffix } = global.attributes

Anyone can help me with this issue?

[troias]

It's got to do with the graphQL query call in utils/api

[troias]

Have a play around in the graphQl playground. You can access it at - localhost:1337/graphql. Read this

• https://strapi.io/blog/a-deep-dive-into-strapi-graph-ql
  and this:
• https://docs.strapi.io/developer-docs/latest/plugins/graphql.html#usage
  and:
• https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/graphql-api.html

The reason I got this error is when I made a multi image field in strapi and tried to use ...FileParts to get the data.

The issue was that he makes a call with a fragment which is like a template and called it ...FileParts for UploadFileEntityResponse which if you read the schema on 1337/graphql is just the unified response format for single images and files.

          fragment FileParts on UploadFileEntityResponse {
            data {
              id
              attributes {
                alternativeText
                width
                height
                mime
                url
                formats
              }
            }
          }

The reason he uses a fragment is so instead of having to request data in the above standard format and repeat you can just make a fragment name it ...FileParts and use it in place of that standard graph structure. Have a look in the utils/api folder

The issue I had is that UploadFileEntityResponse is for single entities or images / files. This link goes over it - https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/graphql-api.html

To fix and have access to an array of images for my product slider I created another fragment for collections or arrays of images or components. I made a new fragment in the utils/api just above the other one.

• more on fragments https://www.apollographql.com/docs/react/data/fragments/

Code:

       fragment CollectionParts on UploadFileRelationResponseCollection {
              data {
                id
                    attributes {
                        alternativeText
                        width
                        height
                        mime
                        url
                        formats
                      }
              }
            }

Then when I made a component lets say ProductFeatureGroup with a Component of Product and a product image called productImage.

I can request the collection of images using the new CollectionParts template in the api folder

... on ComponentSectionsFeatureProductGroup {
                      id
                      mainTitle
                      product  {
                        id
                        productImage {
                          ...CollectionParts
                           }
                        productCard {
                          id
                          productTitle
                          productContent
                       
                        }
                        productSizeOption {
                          id
                          size
                          price
                        }
                      }
                   
                    }

The other reason is you forgot to add a required field. But the error literally means that your graph query somewhere is failing cause it did not respond.

[cindyallis]

I'm running into the same issue using the Strapi-Next Corporate Starter, I tried adding the fragment but that doesn't solve it. I'm not sure how to best debug it so it is unclear to me on which part it is missing the metadata property. I'm getting this error:

TypeError: Cannot destructure property 'metadata' of 'global.attributes' as it is undefined.

I pasted the graphql query in the graphql playground and there it works fine, so I think somehow there is a property missing of metadata somewhere

[sparrrow1011]

still no solution??

[hwr7dd]

Here is a workaround solution to this for anyone interested:
@sparrow1011
@troias is correct and the problem is the GraphQL query in utils/api. I got rid of the fragment and manually added it to each place it was used.
I could get the query to run in the playground but it still wouldn't work for this issue. So I opted to take the approach Strapi used in their other starter. The getinitialprops function in pages/api/_app.js is what was causing the issue.

MyApp.getInitialProps = async (ctx) => {
const appProps = await App.getInitialProps(ctx);
const globalRes = await fetchAPI("/global", {
populate: "*",
});
return { ...appProps, pageProps: { global: globalRes.data } };
};
export default MyApp;

I basically swapped the graphql query with a rest query and voila it works. I don't use graphql at all so this solution is really based more in my lack of knowledge of graphql. Also note that I got rid of the locale. I don't want it in my project so it works for me.