[SOLVED] Items are not displayed in the correct locale (VueJS)

Hi, on my English pages, my DatoCMS GraphQL static query returns the French text instead of the English version, even if my page has $locale in the query and my $context.locale is EN.

Hi @guillaume can you please make a screenshot of the network request to https://graphql.datocms.com in your browser developer tools? I’m interested in the request body and response body.

Please, hide your Authorization header in your screenshot (since it contains your token)

{
"data": {
	"page": {
		"id": "50669801",
		"titre": "Home",
		"slug": "",
		"_allSlugLocales": [{
			"locale": "en",
			"value": ""
		}, {
			"locale": "fr",
			"value": ""
		}],
		"_seoMetaTags": [{
			"attributes": null,
			"content": "Home"
		}, {
			"attributes": {
				"property": "og:title",
				"content": "Home"
			},
			"content": null
		}, {
			"attributes": {
				"name": "twitter:title",
				"content": "Home"
			},
			"content": null
		}, {
			"attributes": {
				"property": "og:locale",
				"content": "en"
			},
			"content": null
		}, {
			"attributes": {
				"property": "og:type",
				"content": "article"
			},
			"content": null
		}, {
			"attributes": {
				"property": "article:modified_time",
				"content": "2021-08-03T18:47:08Z"
			},
			"content": null
		}, {
			"attributes": {
				"name": "twitter:card",
				"content": "summary"
			},
			"content": null
		}],
		"contenu": [{
			"id": "50681166",
			"titre": "Performance digital advertising to accelerate your growth",
			"boutonTitre": "Work with Us",
			"image": {
				"lowRes": {
					"srcSet": "https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?ar=9%3A18&dpr=0.25&fit=crop&w=960 240w,https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?ar=9%3A18&dpr=0.5&fit=crop&w=960 480w,https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?ar=9%3A18&dpr=0.75&fit=crop&w=960 720w,https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?ar=9%3A18&fit=crop&w=960 960w",
					"webpSrcSet": "https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?ar=9%3A18&dpr=0.25&fit=crop&fm=webp&w=960 240w,https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?ar=9%3A18&dpr=0.5&fit=crop&fm=webp&w=960 480w,https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?ar=9%3A18&dpr=0.75&fit=crop&fm=webp&w=960 720w,https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?ar=9%3A18&fit=crop&fm=webp&w=960 960w",
					"sizes": "(max-width: 960px) 100vw, 960px",
					"src": "https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?ar=9%3A18&fit=crop&w=960",
					"width": 960,
					"height": 1920,
					"aspectRatio": 0.5,
					"alt": null,
					"title": null,
					"bgColor": "#00d2b0",
					"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICBQLEw0LDg4QDQ0NDREODQ0NFxYZGBYVFhUmHysjGh0oHRUWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHC8oGig7Ly8vLzUvLy8vLy8vOzsvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABgADAMBIgACEQEDEQH/xAAZAAACAwEAAAAAAAAAAAAAAAAEBQECBwD/xAAbEAACAwADAAAAAAAAAAAAAAAAAQIDEQQSIf/EABcBAAMBAAAAAAAAAAAAAAAAAAIDBAH/xAAZEQADAQEBAAAAAAAAAAAAAAAAAQIhMQT/2gAMAwEAAhEDEQA/AND581KbQudfoTdrtelHmmoguE9YXy6urbFdl2TaIOCjRHstzw//2Q=="
				},
				"mediumRes": {
					"srcSet": "https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?dpr=0.25&fit=crop&h=900&w=1024 256w,https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?dpr=0.5&fit=crop&h=900&w=1024 512w,https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?dpr=0.75&fit=crop&h=900&w=1024 768w,https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?fit=crop&h=900&w=1024 1024w",
					"webpSrcSet": "https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?dpr=0.25&fit=crop&fm=webp&h=900&w=1024 256w,https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?dpr=0.5&fit=crop&fm=webp&h=900&w=1024 512w,https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?dpr=0.75&fit=crop&fm=webp&h=900&w=1024 768w,https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?fit=crop&fm=webp&h=900&w=1024 1024w",
					"sizes": "(max-width: 1024px) 100vw, 1024px",
					"src": "https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?fit=crop&h=900&w=1024",
					"width": 1024,
					"height": 900,
					"aspectRatio": 1.1377777777777778,
					"alt": null,
					"title": null,
					"bgColor": "#00d2b0",
					"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBw0HBgoICBIVDRQLDhgNDg0VCRENFg4PFx8lHCIVIiEaHzcjGh0oKRUWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHDsoIig7OzsvOzswLzs7Lzs7Ozs7LzsvLzUyLy8vLy8vOy81LzUvLy8vLy8vLy8vLy8vLy8vL//AABEIABUAGAMBIgACEQEDEQH/xAAYAAEAAwEAAAAAAAAAAAAAAAAABAUGB//EAB4QAAIBBAMBAAAAAAAAAAAAAAABEQIDBBIFEyMh/8QAFwEAAwEAAAAAAAAAAAAAAAAAAwQGAf/EABwRAAIDAAMBAAAAAAAAAAAAAAABAgMRBDJBEv/aAAwDAQACEQMRAD8A6/l16WWZvJq7K2XnItu3CKGIrcm4LWpSIWRV0qWCNzVyLL1AaMNWkzzOWqbflG3yVtT9KPNWkwAA9KS3oZ/N9G1UABncJC5KU22f/9k="
				},
				"highRes": {
					"srcSet": "https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?dpr=0.25&fit=crop&h=1000&w=1920 480w,https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?dpr=0.5&fit=crop&h=1000&w=1920 960w,https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?fit=crop&h=1000&w=1920 1920w",
					"webpSrcSet": "https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?dpr=0.25&fit=crop&fm=webp&h=1000&w=1920 480w,https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?dpr=0.5&fit=crop&fm=webp&h=1000&w=1920 960w,https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?fit=crop&fm=webp&h=1000&w=1920 1920w",
					"sizes": "(max-width: 1920px) 100vw, 1920px",
					"src": "https://www.datocms-assets.com/49898/1627997074-homepagefusee.png?fit=crop&h=1000&w=1920",
					"width": 1920,
					"height": 1000,
					"aspectRatio": 1.92,
					"alt": null,
					"title": null,
					"bgColor": "#00d2b0",
					"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICBAOFQ0LDhgQGg0PDRERFgoWFx8lGBYVFhUaHzcjGh0oHRoiJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHC8oIig7OzsvOy8vOzsvLzs7Ozs7Oy8vNTsvLy8vLy87OzsvLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAABQQGB//EAB0QAAEEAwEBAAAAAAAAAAAAAAEAAgMSBREhEwT/xAAWAQEBAQAAAAAAAAAAAAAAAAAEBgH/xAAcEQABAwUAAAAAAAAAAAAAAAACAAERAwQFITH/2gAMAwEAAhEDEQA/ANayElYuKvON3naffcLM6kcgo46Wo9SOulmTk8Yy5Cj5k2iIKEkBZ22pDIXJjWgV/9k="
				}
			},
			"_modelApiKey": "hero",
			"description": "<p>A team of specialists who integrate perfectly with yours to achieve your goals and your absolute satisfaction.</p>"
		}, {
			"id": "50681167",
			"titre": "In specialization, we believe.",
			"image": {
				"lowRes": null,
				"mediumRes": null,
				"highRes": null
			},
			"destination": {
				"titre": "Expertises",
				"slug": "expertises"
			},
			"description": "<p>Too many agencies have a service offering worthy of a Buffet des Continents. Put your customer acquisition in the hands of specialists who admit they don't know everything. We'd rather be the best in our field than juggle community management, SEO, branding, web design and man-sandwich campaigns. Our batting average of success stories thanks us for this wise decision.</p>",
			"bouton": "Discover our expertise",
			"_modelApiKey": "section_mauve"
		}, {
			"id": "50681168",
			"titre": "You are in good company.",
			"description": "<p>We propel high-growth startups as well-established brands that always want more, easy-to-understand products like deepwater drilling services.</p>",
			"_modelApiKey": "liste_client"
		}, {
			"id": "50681169",
			"titre": "Data-driven successes. You could be next.",
			"image": {
				"lowRes": {
					"srcSet": "https://www.datocms-assets.com/49898/1627998973-4.jpeg?ar=9%3A18&dpr=0.25&fit=crop&w=960 240w,https://www.datocms-assets.com/49898/1627998973-4.jpeg?ar=9%3A18&dpr=0.5&fit=crop&w=960 480w,https://www.datocms-assets.com/49898/1627998973-4.jpeg?ar=9%3A18&dpr=0.75&fit=crop&w=960 720w,https://www.datocms-assets.com/49898/1627998973-4.jpeg?ar=9%3A18&fit=crop&w=960 960w",
					"webpSrcSet": "https://www.datocms-assets.com/49898/1627998973-4.jpeg?ar=9%3A18&dpr=0.25&fit=crop&fm=webp&w=960 240w,https://www.datocms-assets.com/49898/1627998973-4.jpeg?ar=9%3A18&dpr=0.5&fit=crop&fm=webp&w=960 480w,https://www.datocms-assets.com/49898/1627998973-4.jpeg?ar=9%3A18&dpr=0.75&fit=crop&fm=webp&w=960 720w,https://www.datocms-assets.com/49898/1627998973-4.jpeg?ar=9%3A18&fit=crop&fm=webp&w=960 960w",
					"sizes": "(max-width: 960px) 100vw, 960px",
					"src": "https://www.datocms-assets.com/49898/1627998973-4.jpeg?ar=9%3A18&fit=crop&w=960",
					"width": 960,
					"height": 1920,
					"aspectRatio": 0.5,
					"alt": null,
					"title": null,
					"bgColor": "#9baf4d",
					"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoIEQgTDQ0RDhIQDQ0NEhUNDQ0NFxolGBYTIhUaHysjGh0oHRUiJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHA4QHC8oFig7Ly8vLy8vLy8vLy8vOzsvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABgADAMBIgACEQEDEQH/xAAZAAABBQAAAAAAAAAAAAAAAAAGAAEDBAX/xAAdEAABBAIDAAAAAAAAAAAAAAABAAIDBCIxBREh/8QAFgEAAwAAAAAAAAAAAAAAAAAAAQID/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAECA//aAAwDAQACEQMRAD8ANCcVRldmVM6YBm1lz2wJT6qAlCsWC2PaGrfIFtgjtMkjYuTP/9k="
				},
				"mediumRes": {
					"srcSet": "https://www.datocms-assets.com/49898/1627998973-4.jpeg?dpr=0.25&fit=crop&h=900&w=1024 256w,https://www.datocms-assets.com/49898/1627998973-4.jpeg?dpr=0.5&fit=crop&h=900&w=1024 512w,https://www.datocms-assets.com/49898/1627998973-4.jpeg?dpr=0.75&fit=crop&h=900&w=1024 768w,https://www.datocms-assets.com/49898/1627998973-4.jpeg?fit=crop&h=900&w=1024 1024w",
					"webpSrcSet": "https://www.datocms-assets.com/49898/1627998973-4.jpeg?dpr=0.25&fit=crop&fm=webp&h=900&w=1024 256w,https://www.datocms-assets.com/49898/1627998973-4.jpeg?dpr=0.5&fit=crop&fm=webp&h=900&w=1024 512w,https://www.datocms-assets.com/49898/1627998973-4.jpeg?dpr=0.75&fit=crop&fm=webp&h=900&w=1024 768w,https://www.datocms-assets.com/49898/1627998973-4.jpeg?fit=crop&fm=webp&h=900&w=1024 1024w",
					"sizes": "(max-width: 1024px) 100vw, 1024px",
					"src": "https://www.datocms-assets.com/49898/1627998973-4.jpeg?fit=crop&h=900&w=1024",
					"width": 1024,
					"height": 900,
					"aspectRatio": 1.1377777777777778,
					"alt": null,
					"title": null,
					"bgColor": "#9baf4d",
					"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoIDQgLDgoRDhgZEQ0NDhENDQ0YGh8ZGBYVFiEdHysvJh0oHRUWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHDsoIig7OzMvNTs7OzsvLzQ7Ozs7Oy81LzA1Ly8vLy88Oy8vLy8vLy81Ly8vLy8vLy8vLy81L//AABEIABUAGAMBIgACEQEDEQH/xAAZAAEBAAMBAAAAAAAAAAAAAAAABQQGBwP/xAAgEAABAwQCAwAAAAAAAAAAAAAAAQIFAwQSIREiFEFx/8QAGAEBAAMBAAAAAAAAAAAAAAAABAIDBQH/xAAbEQEBAQACAwAAAAAAAAAAAAABAAIRMhIiMf/aAAwDAQACEQMRAD8A2eyeiohl1V6ESMucmIvJm3N2jaa7Jny4gNMk6qN5BDmpNrcuwD70DWmWoQ71Wi34e0nVc2ku/QAs6xOfe5tPXlbycMtAADoFebZwHiX/2Q=="
				},
				"highRes": {
					"srcSet": "https://www.datocms-assets.com/49898/1627998973-4.jpeg?dpr=0.25&fit=crop&h=1000&w=1920 480w,https://www.datocms-assets.com/49898/1627998973-4.jpeg?dpr=0.5&fit=crop&h=1000&w=1920 960w,https://www.datocms-assets.com/49898/1627998973-4.jpeg?fit=crop&h=1000&w=1920 1920w",
					"webpSrcSet": "https://www.datocms-assets.com/49898/1627998973-4.jpeg?dpr=0.25&fit=crop&fm=webp&h=1000&w=1920 480w,https://www.datocms-assets.com/49898/1627998973-4.jpeg?dpr=0.5&fit=crop&fm=webp&h=1000&w=1920 960w,https://www.datocms-assets.com/49898/1627998973-4.jpeg?fit=crop&fm=webp&h=1000&w=1920 1920w",
					"sizes": "(max-width: 1920px) 100vw, 1920px",
					"src": "https://www.datocms-assets.com/49898/1627998973-4.jpeg?fit=crop&h=1000&w=1920",
					"width": 1920,
					"height": 1000,
					"aspectRatio": 1.92,
					"alt": null,
					"title": null,
					"bgColor": "#9baf4d",
					"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLCgoLDhgQDRcYDhMVGB0YGh8jLiIWIioaJS0lGh0oHRUWJDUlKC0vMjIyHSI4PTcwPCsxMi8BCgsLDg0OHBAQHDsoIig7Ozs7NTs7Ozs7Ozs7Ozs7Ozs7Lzs7Oy87Oy87Ozs7Ozs7Ly8vLy87LzsvLy87OzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAWAAEBAQAAAAAAAAAAAAAAAAAGBQD/xAAfEAABBAICAwAAAAAAAAAAAAADAAECBAUxIWEGEVH/xAAXAQADAQAAAAAAAAAAAAAAAAACAwUB/8QAGhEAAQUBAAAAAAAAAAAAAAAAAgABAxEhEv/aAAwDAQACEQMRAD8AqYu3EkuHVmwaLB2gHid0hxtKW3SPJ2iDrP6+Ig0bWy0MnKjZzIQFJ+VkNyt8p7shy03aynyk7lia4Uv/2Q=="
				}
			},
			"destination": {
				"slug": "result",
				"titre": "Result"
			},
			"bouton": "See the results",
			"description": "<p>KaseMe's digital advertising investments have grown from $ 1,000 to $ 200,000 per month in just two years. See how we've helped propel their growth internationally.</p>",
			"_modelApiKey": "section_verte"
		}, {
			"id": "50681170",
			"titre": "Your new hires of the month.",
			"description": "<p>A team made up entirely of star players. Your only regret will be that you didn't hire them before us.</p>",
			"_modelApiKey": "liste_team"
		}, {
			"id": "50681171",
			"titre": "Take the first step. We'll take care of the rest.",
			"image": {
				"lowRes": null,
				"mediumRes": null,
				"highRes": null
			},
			"_modelApiKey": "contact"
		}]
	}
},
"extensions": {
	"context": {
		"id": "50669801",
		"locale": "en",
		"slug": "",
		"_allSlugLocales": [{
			"locale": "en",
			"value": ""
		}, {
			"locale": "fr",
			"value": ""
		}]
	}
}

}

It does not look like a request to our https://graphql.datocms.com endpoint :thinking:

Are you using Gridsome maybe? If so, then you are problably sending the graphql request to its own graphql server, which might have a different graphql dialect respect to our https://graphql.datocms.com endpoint

@guillaume I’ve tried to use gridsome with their official graphql-source plugin ( Plugins - Gridsome ), which is not the one you are using. Try this one

 ↳ $ cat gridsome.config.js
// This is where project configuration and plugin options are located.
// Learn more: https://gridsome.org/docs/config

// Changes here require a server restart.
// To restart press CTRL + C in terminal and run `gridsome develop`

module.exports = {
  siteName: 'Gridsome',
  plugins: [
    {
      use: '@gridsome/source-graphql',
      options: {
        url: 'https://graphql.datocms.com/',
        fieldName: 'dtcms',
        typeName: 'DatoCms',
        headers: {
          Authorization: `Bearer xxxx`,
        },
      },
    },
  ]
}
# Write your query or mutation here
query MintQuery($id: DatoCms_ItemId, $locale: DatoCms_SiteLocale) {
  dtcms {
    lang: page(
      locale: $locale
      filter: { _isValid: { eq: "true" }, id: { eq: $id } }
    ) {
      id
      _allSlugLocales(locale: $locale) {
        locale
        value
      }
    }
    page: allPages(
      locale: $locale
      filter: { _isValid: { eq: "true" }, id: { neq: "50669801" } }
    ) {
      id
      slug
      titre
    }
  }
}

hi @guillaume , did it work?

Yes, seems to work with DTCMS. Why is @gridsome/source-graphql is different then gridsome/source-graphql ?

Don’t know why, but they are different npm packages though (@gridsome/source-graphql, gridsome-source-graphql)

@gridsome/source-graphql looks like the official one. Anyway, we do not manage these two packages :slight_smile:

Finally, this work in the ___explore but not in the code. Any idea?

I’ve ended up using Slugify method on value in item._allTitreLocales

Do you manage any Official Gridsome Plugins?

Not at the moment, but the source graphql plugin should work, since it basically sends a graphql request to our servers.

But I don’t know why in your code the output is different from the one in the graphql explorer, sorry :frowning:

1 Like

@guillaume there is a source-datocms package: Plugins - Gridsome to which we contributed a bit, you can try that, it’s not 100% complete, but there’s someone using it in production

Hi, i’ve learned that Static-Query cannot use Locale to fetch content. So I had to set my NavBar query in my Page.vue Template, then call the query in my NavBar components.

1 Like