Wrong JSON format after update

Hey - I just updated to latest gatsby and latest datocms-source, and now my content from datocms json fields is fetched in a wrong format (I suppose):
{
en: ‘{\n’ +
’ “PARTIALS”: {\n’ +
’ “HEADER”: {\n’ +
’ “CART”: “Cart”,\n’ +
’ “ACCOUNT”: “Account”,\n’ +
’ “LOGOUT”: “Log out”\n’ +
’ },\n’ +
’ “FOOTER”: {\n’ +
’ “ADDRESS”: “Address”,\n’ +
’ “CONTACT”: “Contact”,\n’ +
’ “FOLLOW”: “Follow Us”,\n’ +
’ “LANGUAGE”: “Language”,\n’ +
’ “CURRENCY”: “Currency”\n’ +
’ }\n’ +
’ },\n’ +
… etc

image

Hello @anders

sorry for that :frowning:

Have you tried rolling back to the previous gatsby-source-datocms that was working? Can you please report on which version were you before the update?

No I didn’t try to roll back - would like the latest version as I try to keep deps up to date once in a while :slight_smile: The latest version that worked was version “2.3.0” as far as I can see.

sure, but maybe can you just try to roll back our source plugin to check if the problem is there or somewhere else?

It worked prior to upgrading and I did a yarn upgrade gatsby-source-datocms in order to get the latest, so the problem came after upgrading. And I have done a fresh install of node modules.

can you maybe share the access to your repo? feel free to reach out via PM (i’m matjack1 on github)

You should have access to a temp repo now :slight_smile:

If I should try master, than it’s working fine here :slight_smile:

I’m with node v12.13.1 and you?

The solution is set to run v15.5.1. Did you update gatsby-source-datocms to the latest? I actually used 2.3.0 again since I needed it to work.

Try to remove it and install the latest version and see what happens.

let’s follow up on your repo, ok?

1 Like

Hello, the problem is still there.
I am getting exactly the same Json.
Node version v18.12.1
“dependencies”: {
“babel-plugin-styled-components”: “^2.0.7”,
“gatsby”: “^5.7.0”,
“gatsby-plugin-anchor-links”: “^1.2.1”,
“gatsby-plugin-image”: “^3.7.0”,
“gatsby-plugin-manifest”: “^5.8.0”,
“gatsby-plugin-sharp”: “^5.7.0”,
“gatsby-plugin-sitemap”: “^6.7.0”,
“gatsby-plugin-smoothscroll”: “^1.2.0”,
“gatsby-plugin-styled-components”: “^6.7.0”,
“gatsby-source-datocms”: “^5.0.4”,
“gatsby-source-filesystem”: “^5.7.0”,
“gatsby-transformer-sharp”: “^5.7.0”,
“prop-types”: “^15.8.1”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“react-helmet”: “^6.1.0”,
“react-icons”: “^4.8.0”,
“react-scrollspy”: “^3.4.3”,
“styled-components”: “^5.3.9”
}
This is what my json looks like if I make a request directly in the Dato CMS API Explorer:

query MyQuery {
homePage {
aboutList
}
}

=========
Gatsby
query MyQuery {
datoCmsHomePage {
aboutList
}
}

{
“data”: {
“datoCmsHomePage”: {
“aboutList”: “{\n "aboutListLeft": [\n {\n "title": "Birthday:",\n "description": "15 Apr 1990"\n },\n {\n "title": "Phone:",\n "description": "+33 7 42 57 51 17"\n },\n {\n "title": "Study:",\n "description": "Institute of Photography"\n }\n ],\n "aboutListRight": [\n {\n "title": "Degree:",\n "description": "Master"\n },\n {\n "title": "Mail:",\n "description": "leotobias@gmail.com"\n },\n {\n "title": "Freelance:",\n "description": "Available"\n }\n ]\n}”
}
},
“extensions”: {}
}

hello @dan1work2mail can you please share access to some code where I can reproduce the issue? You can invite me (m.giaccone@datocms.com) to your repo if you want.

Hello,
I sent you an invitation (danmiles github name).

The original json file is located
to src/data folders


This is how it looks in Dato cms (everything works fine there)

But in Gatsby :slight_smile:

query MyQuery {
datoCmsHomePage {
aboutImage {
gatsbyImageData(width: 400, height: 478)
alt
}
aboutTitle
aboutContent
aboutList
}
}

Response to a request:

  "aboutList": "{\n  \"aboutListLeft\": [\n    {\n      \"title\": \"Birthday:\",\n      \"description\": \"15 Apr 1990\"\n    },\n    {\n      \"title\": \"Phone:\",\n      \"description\": \"+33 7 42 57 51 17\"\n    },\n    {\n      \"title\": \"Study:\",\n      \"description\": \"Institute of Photography\"\n    }\n  ],\n  \"aboutListRight\": [\n    {\n      \"title\": \"Degree:\",\n      \"description\": \"Master\"\n    },\n    {\n      \"title\": \"Mail:\",\n      \"description\": \"leotobias@gmail.com\"\n    },\n    {\n      \"title\": \"Freelance:\",\n      \"description\": \"Available\"\n    }\n  ]\n}"
}

},

Hey @dan1work2mail I’ve tried your repo but everything works well to me. Where are you doing the query from? If easier, feel free to continue the discussion on your repo, that’s fine

This is the About.jsx component

I removed this feature now I will add it again.

datoCmsHomePage {
      aboutList
   })

============
What is very strange when I make a request on localhost in
localhost:8000/___graphql

THAT is what happens screenshot below

But when I call it in coponent About.jsx

  const data = useStaticQuery(graphql`
    query {
      datoCmsHomePage {
        aboutImage {
          gatsbyImageData(width: 400, height: 478)
          alt
        }
        aboutSubtitle
        aboutTitle
        aboutContent
        aboutList
      }
    }
  `);

   console.log(data.datoCmsHomePage.aboutList);

It produces a normal result.

{
  "aboutListLeft": [
    {
      "title": "Birthday:",
      "description": "15 Apr 1990"
    },
    {
      "title": "Phone:",
      "description": "+33 7 42 57 51 17"
    },
    {
      "title": "Study:",
      "description": "Institute of Photography"
    }
  ],
  "aboutListRight": [
    {
      "title": "Degree:",
      "description": "Master"
    },
    {
      "title": "Mail:",
      "description": "leotobias@gmail.com"
    },
    {
      "title": "Freelance:",
      "description": "Available"
    }
  ]
}

uhm, are you on linux/mac/windows? which version?

Just to understand, is it good now then, or do you still need to figure things out?

Windows 10 Pro release
Version 22H2

OS Build 19045.2728
Interoperability Windows Feature Experience Pack 120.2212.4190.0

it doesn’t work, I wrote it wrong, the console gives out not an array, but just a string

ok, it’s not critical, I just thought I’d let you know about this problem.

uhm, ok, but if the code gets the data right, it looks like a visualization error, more than anything.

If this is the case, the problem is within Gatsby, nothing we can act on, sorry :frowning: