Pass Accept-Language header to query about gridsome-source-shopify HOT 18 OPEN

I tested the translatable fields and it is working! Great job, thanks.

I could also test the translations collection if you like?

from gridsome-source-shopify.

Hey @vappler490,

Good question - it would be easy enough to add the Accept-Language header to get a single language, but I would need to make a few changes if you would want it to fetch all content for all translations (or a selection of).

I'll aim to work on this later this week, and let you know when I have a preview you can checkout.

from gridsome-source-shopify.

Hey @thetre97,

Thanks for the reply and great that you are looking at this. Yeah there is some work to do. I did some research and found a PR for the same issue at the gatsby shopify plugin. If i understand this approach correctly, it will accept a list of languages and do the queries for all of them. Also there will be a new language-node for filtering the data later in graphql. gatsbyjs/gatsby@680ba95

from gridsome-source-shopify.

So I've found it's quite easy to query the data, just need to work on creating a custom resolver to handle fetching the translations in Gridsome.

from gridsome-source-shopify.

Hey @thetre97,
Are there any news on this issue?

from gridsome-source-shopify.

Hey, sorry - turned out it was a bit more difficult to implement than I thought, so put it off a bit then got distracted 😏

Ideally, how would you want to fetch the translated content in Gridsome? I.e. have multiple nodes of the same type, but each with different locale content similar to Prismic (but id's would need to be different to Shopify id) or have a graphql argument on a translatable field to fetch a specific locale, or different content types for different locales, etc.?

from gridsome-source-shopify.

I could provide a couple of examples if you'd like...

from gridsome-source-shopify.

Hey, no problem.
A graphql argument on a translatable field would be great. It also seems according to your response the easiest way to implement this feature.
Another idea of mine was that a returns a list of i.e. two collections with two different locale fields and all the other stuff. The fields with translatable content would be translated. Afterwards it is possible to return the desired collection in computed(). This would solve the problem of the Shopify id. But it may break the whole data-structure.

Sure, please send me some examples.

from gridsome-source-shopify.

Okay, so here was the couple of ideas I had:

Translatable fields

Most likely used if you have different pages for different locales, e.g. /fr/some-product:

# I.e. id: "abc123", locale: "fr" (from page context)
query Product ($id: ID!, $locale: String!) {
	product (id: $id) {
		id
		title(locale: $locale)
		originalTitle: title # can be aliased if needed
		description(locale: $locale)
		variants {
			title(locale: $locale)
		}
		alternativeLocales {
			id
			locale
			path
		}
	}
}

Which would return:

"product": {
	"id": "abc123",
	"title": "french title",
	"description": "french description",
	"variants": [{ "title": "french variant title" }],
	"alternativeLocales": [
	  {
	    "id": "abc122",
	    "locale": "en",
	    "path": "/en/some-product"
	  }
	]
}

Multiple Nodes

Most likely used if you want to fetch every product locale on a single page, and switch between them. Could either use the existing allProducts query, or create a new query specifically for fetching translations:

# I.e. id: "abc123" (from page context)
query ProductTranslations ($id: ID!, $locale: String!) {
	# allProducts (handle: $handle) {
	productTranslations (id: $id) {
		id
		shopifyId
		title
		description
		variants {
			title
		}
	}
}

Which would return:

"productTranslations": [
  {
	"id": "1",
	"shopifyId": "abc122",
	"title": "english title",
	"description": "english description",
	"variants": [{ "title": "english variant title" }]
  },
  {
	"id": "2",
	"shopifyId": "abc123",
	"title": "french title",
	"description": "french description",
	"variants": [{ "title": "french variant title" }]
  },
  {
	"id": "3",
	"shopifyId": "abc124",
	"title": "spanish title",
	"description": "spanish description",
	"variants": [{ "title": "spanish variant title" }]
  }
]

And you can filter between them using computed, as you mentioned above. Optionally, you could filter which locales you wanted to return.

from gridsome-source-shopify.

The first option with translatable fields meets my requirements exactly.

from gridsome-source-shopify.

Cool! I'll try to put aside some time to implement it soon.

from gridsome-source-shopify.

Hey @vappler490 - just released a beta version that should enable the above functionality. Please check it out, and let me know of any issues...

from gridsome-source-shopify.

Hey @thetre97. Thanks for your work. I'm getting this error: Error: Resolver for ShopifyArticle.title must have a "type" property.

from gridsome-source-shopify.

Ah okay - I take it you have no articles in your Shopify store?

from gridsome-source-shopify.

I have just published an update, which should fix this...?

from gridsome-source-shopify.

Please do!

from gridsome-source-shopify.

Hey @thetre97
Sorry for the delayed response, i was quite busy the last weeks. Today i tried to use the Translations Collections and found some issues.

1. The documentation shows a allShopifyProductTranslations query but i can not find it within my graphql-schema.
2. If i am using the allShopifyProductTranslation(filter: { id: { eq: $id } }) query i get an empty array even though shopifyProduct(id: $id) returns an object. translatableResources(first: 30, resourceType: PRODUCT) from the shopify admin api returns the product where the "translations": [] array contains the desired translation but only one field is translated (body_hmtl) because the other fields stay the same in both translations.

Let me know if you need more information. I can send you an email if you want.

from gridsome-source-shopify.

Can I check you have added the correct config in gridsome.config.js?
And do you have a repo I can check out...? And feel free to send an email with more details!

from gridsome-source-shopify.