-
Notifications
You must be signed in to change notification settings - Fork 489
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(source-contentful) multi-language support #1341
base: master
Are you sure you want to change the base?
Conversation
Great feature, and good docs, works like a charm for me alongside I have a small issue with multi language entries that are only valid for one locale, eg. their url is empty in some locales. with this template setup // gridsome.config.js
templates: {
ContentfulRecipe: [
{
path: (node) => `/recipes/${node.url}`
}
]
} I don't really see a way around it though, as The end result is actually what we want, eg. the html file never gets created if it doesn't have a url, but it seems sort of flaky to rely on the collection failing to do this filtering. |
@kasperstorgaard Yes, multi language entries that are only valid for one locale can't be supported at the moment. What you can do in your special use case though, is to import the entries with the {
use: "@gridsome/source-contentful",
options: {
space: process.env.CTF_SPACE_ID,
accessToken: process.env.CTF_ACCESS_TOKEN,
host: "cdn.contentful.com",
environment: "master",
typeName: "Contentful",
parameters: {
locale: "*"
}
}
} and then create the pages in your module.exports = function (api) {
api.loadSource(({ getCollection, createPage }) => {
const collectionName = "ContentfulRecipe";
const locales = ["en", "de"];
const entries = getCollection(collectionName);
entries.data().forEach(
(entry) =>
entry.url !== undefined &&
locales.forEach((locale) =>
createPage({
path: `/recipes/${entry.url}`,
component: `./src/templates/${collectionName}.vue`,
context: {
id: entry.id,
locale,
},
route: {
meta: {
locale,
},
},
})
)
);
});
}; |
Thank you for working on this! I've been experimenting with it lately, and one issue I seem to be running into is that linked entries are all returning |
Thanks @louisnovick for the feedback! You are right, this also doesn't work for me. I already see what's the problem, I will work on a solution and keep you updated. |
@louisnovick This should work now! The previous version included some major bugs. It looks like I mixed up the method parameters of |
@helloiamlukas Thanks for the quick update! It seems to be working as expected now 🙂 I'll keep playing with it and let you know if anything else comes up. |
@helloiamlukas Thanks a lot for the work you've done on this. I was able to get it working... sort of. I've also installed the UpdatesUpdate 1/15/21 Along with this update, I've been reading more about the page-query documentation to ensure that I understood them correctly and the $context.locale should be passed to the query and it seems that it should, so I'm not sure why it doesn't get passed. I've also been reading about the Update 1/15/21 Pt 2
I then added these lines to my config file:
And it works great! The default url returns just english, /en/ returns just english and /es/ returns just spanish. Now I'm just stuck with the newest problem where templates don't work on the default url. Working on that now. GoalMy goal is to set up the site for English and Spanish where:
Current ConfigMy current config for
I set In my
My understanding is that the idea is for the ProblemsHere is where my issues come in. There are 3: 1. Variable not working in 2. Duplicate key for property path 3. No locale in URL loads both locales Attempted solutions1. Variable not working in 2. Duplicate key for property path 3. No locale in URL loads both locales ConclusionIf anyone has any thoughts or similar issues, let me know! I will update this as I figure things out. Thanks! |
This happens because Gridsome will not just create a
I forgot about this default parameter in the docs, I will edit it |
@jakehandwork Regarding your other problems: The Gridsome i18n Plugin unfortunately has some bug where it will always fall back to the default locale in your Templates (not in Pages though). I made a pull-request to fix this problem. Please make sure to use this version of the plugin by adding it to your
Let me know if this works out for you. Otherwise you can also provide a test repo, so I can have a closer look into it. |
Hey @helloiamlukas. Thanks for all the feedback and for updating the PR. I've added the default $locale... should've thought of that myself, though I'm not really familiar with GraphQL yet. Anyways, it looks like your two responses here have resolved all my problems. I updated the $locale variable to have a default and I'm using your forked i18n plugin. This left me with one final issue. For templated routes, I was only able to get either
Unable to figure out how to add the english locale twice with different base routes, I decided to look into the Pages API using
I tried the same code, adjusting it to my situation, and ran into a few issues. To start, I slowly found out that
This ends up solving my problem. Now all routes are properly working on pages and templates. Thanks for all your help @helloiamlukas. Let me know if you have any questions or if it seems I misunderstood something. |
Hi @helloiamlukas - question I'm hoping you might be able to help with. The fix seems to work well for getting entries and their data, but it seems to not work at all for getting the correct data from assets. Are you able to provide some guidance on that? Working on a multilingual site and need to have alt tags for images in the correct language, but right now all assets return English content no matter what, despite the assets themselves having fields for every language on my localization settings. |
Hi again @helloiamlukas. I've actually resolved the issue by using much the same logic as you're already doing on the entries themselves. I'm hosting a version of your PR (down the rabbit hole we go!) for my own use, and you can reference it here if you want to add my changes to your own: https://github.com/DouglasKGlover/gridsome-src-contentful-custom |
Hi there @helloiamlukas ! |
This pull request adds proper multi-language support for the Contentful source.
Before
I previously opened a pull request to define search parameters in the plugin configuration (#1331). This was mainly used to add the
locale
search parameter, in order to retrieve localized nodes.Unfortunately the structure of the returned nodes is not so straight forward to work with. A query within a template would look like this:
If you have a lot of fields, the need for the localized subfields adds up and your query will end up in a huge repetitive mess. In addition to that, you can't define localized template paths, as
node.locale
is always undefined.Now
This pull request fixes the problems mentioned above (and is also a proper solution for #748). You can now define your locales in the source directly:
This will import your nodes once per defined locale. Due to this, it is possible to define localized template paths in the Gridsome configuration.
The query within a template is the same, as it would be in a single language application. In addition to that, the
locale
field returns the current locale.