Couldn't query translated Metaobject contents

[tunphraong]

Hi everyone!

So i have built a custom storefront using Hydrogen, and now i want to add translation feature to it. Everything is working fine on Shopify GraphiQL App with API verison 2023-04.

However, in my hydrogen app, i can only query the translated contents for products and collections, not for Metaobjects :'(. I have also changed UBLIC_STOREFRONT_API_VERSION variable to "2023-04" in my app but no luck. Does anyone know what might be wrong? Thanks in advance!

Btw here's my package.json for your reference

{ "name": "demo-store", "private": true, "version": "0.0.0", "scripts": { "build": "npm run build:css && shopify hydrogen build", "build:css": "postcss styles --base styles --dir app/styles --env production", "dev": "npm run build:css && concurrently -g --kill-others-on-fail -r npm:dev:css \"shopify hydrogen dev\"", "dev:css": "postcss styles --base styles --dir app/styles -w", "preview": "npm run build && shopify hydrogen preview", "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .", "format": "prettier --write --ignore-unknown .", "format:check": "prettier --check --ignore-unknown .", "typecheck": "tsc --noEmit" }, "prettier": "@shopify/prettier-config", "dependencies": { "@headlessui/react": "^1.7.13", "@heroicons/react": "^2.0.16", "@remix-run/react": "1.14.0", "@shopify/cli": "3.29.0", "@shopify/cli-hydrogen": "^4.0.8", "@shopify/hydrogen": "^2023.1.6", "@shopify/hydrogen-react": "^2023.1.6", "@shopify/remix-oxygen": "^1.0.4", "clsx": "^1.2.1", "concurrently": "^7.5.0", "cross-env": "^7.0.3", "graphql": "^16.6.0", "graphql-tag": "^2.12.6", "isbot": "^3.6.5", "react": "^18.2.0", "react-dom": "^18.2.0", "react-intersection-observer": "^9.4.1", "react-use": "^17.4.0", "schema-dts": "^1.1.0", "tiny-invariant": "^1.2.0", "typographic-base": "^1.0.4" }, "devDependencies": { "@remix-run/dev": "1.12.0", "@remix-run/eslint-config": "1.12.0", "@shopify/eslint-plugin": "^42.0.1", "@shopify/oxygen-workers-types": "^3.17.2", "@shopify/prettier-config": "^1.1.2", "@tailwindcss/forms": "^0.5.3", "@tailwindcss/typography": "^0.5.7", "@types/eslint": "^8.4.10", "@types/react": "^18.0.20", "@types/react-dom": "^18.0.6", "concurrently": "^7.4.0", "cross-env": "^7.0.3", "eslint": "^8.20.0", "eslint-plugin-hydrogen": "0.12.2", "postcss": "^8.4.16", "postcss-cli": "^10.0.0", "postcss-import": "^15.0.0", "postcss-preset-env": "^7.8.2", "prettier": "^2.8.4", "rimraf": "^3.0.2", "tailwindcss": "^3.1.8", "typescript": "^4.9.5" }, "engines": { "node": ">=16.13" } }

[frehner]

The Storefront API only supports the following translatable resources: https://shopify.dev/docs/custom-storefronts/building-with-the-storefront-api/markets#translatable-resources

If you would like to suggest that they add support for additional resources, then you can search the discussions here or create a new one: https://github.com/Shopify/storefront-api-feedback

Thanks!

[tunphraong]

Hey @frehner, thanks for your respond.

It looks like i can still query metaobjects in multiple languages using Storefront API. The problem is it's working in graphql editor but not in my app, so i suspect it has something to do with Hydrogen React, but even after i updated Hydrogen React it's still not working.

[frehner]

Thanks for the details. Do you have an example of what your query looks like while using hydrogen-react?

[tunphraong]

Before the query looked like this
producPageTitles: metaobject(handle: {handle: "product-page-titles", type: "product_page_translations"}) { productDetails: field(key: "product_details") { value } shippingButtonTitle: field(key: "shipping_button") { value } addToBagButton: field(key: "add_to_bag_button") { value } learnMoreButton: field(key: "learn_more_button") { value } relatedProductsButton: field(key: "related_products_button") { value } }

After messing around for a bit, i realized that if we get the metaobject using id then the translation works, so i changed the first line to this: producPageTitles: metaobject(id: "gid://shopify/Metaobject/1040810273") {. This looks a like a bug in Hydrogen-react.

[tunphraong]

Btw @frehner , i have another problem with translating the menu to another language, do you know where can i go about this? Thanks!

[tunphraong]

For example, in here ideally i would get "Our Collections!" but instead i just got "Bộ sưu tập" in Vietnamese. If you have any idea, i would really appreciate it.