Content Localization With GraphCMS

“If you talk to a man in a language he understands, that goes to his head. If you talk to him in his language, that goes to his heart.” - Nelson Mandela

isometric illustration of a coder and content marketer

What is i18n?

i18n is an abbreviation for the word "internationalization". The term "i18n" is derived from its spelling as the letter "i" plus 18 letters plus the letter "n". The act of localization or internationalizing is offering content in a variety of languages to accommodate your customers. Localization has become necessary within the tech industry where the majority of businesses have a global audience.

Why should you localize your content?

Localizing is a step most tech companies have to take when they go through hypergrowth. Despite English being a favorite blanket language, there are large markets of customers that prefer companies willing to meet them in the middle. As a developer, this request from your content marketer can seem like a pain, but we've made sure to make it simple. Using GraphCMS as a content localization management system will take the foot work out from the workload of developers. Read on for an example and instructions on setting up localization for your cross-platform or GraphQL project. Something to note is that GraphCMS' localization feature works on any type of field, even assets, and references!

How can you localize your content inside of GraphCMS?

Translating your content into any language your customers require, is now super simple with GraphCMS! Let's look at an example:

  1. First, navigate to the Schema Settings. In the sidebar, you will find it inside of Schema > Configuration.
    1. There you will find the configuration for your project's locales. You are able to define all the possible locales your project should support. Seriously. Feeling like you need to support High Valyrian or Klingon? Give it a shot here. The dropdown will give you standard suggestions, but you can create any custom locale you like.
    2. Click the Star Icon to set a default locale.
    3. After you are done, don't forget to click on Update Locales.
  2. Second, move over to the Content view and edit the fields you like to localize.
    1. If you expand the Advanced panel, you will be able to toggle the Localize field
    2. Then have your content marketers fill out localized content with. For each locale, you'll find a designated input field.

Implementing Your Localized Content with GraphQL

In order to properly display the implementation of locale queries, the example of an eCommerce bookstore's queries will be used. Now that we created some localized content, we can query the generated GraphQL API in three different ways:

A Regular Query

Without passing a locale HTTP header or locale parameter: You will receive content from the default locale.



{
  productListings {
    coverImage {
      url
    }
    bookTitle
    publishedDate
    description
    bookAuthor
  }
}

Passing Locale in the HTTP header

For example: locale: DE. This will override the default locale and only return German values. The benefit or use case of this option is a blanket query for entire landing pages. I.e. when a user toggles a different language in your UI.

  fetch("YOUR_API", {
    method: "POST",
    headers: new Headers({
      'Content-Type': 'application/json',
      'locale': 'EN'
    }),
    body: JSON.stringify({
      query:
        '{productListings { description }}'
    }),
  }).then( function(result) {
    /* process result */
  });

Locale parameter on a localized field

Here we passed a locale: EN parameter to override the default locale or the selected locale from the header.


{
  productListings {
    coverImage {
      url
    }
    bookTitle
    publishedDate
    description(locale: VAL)
    bookAuthor
  }
}

Interested in Learning More About Features of GraphCMS?

GraphCMS has all of the most important features of a robust content management system, while also pioneering proprietary features for the era of application content. Learn more in these landing pages all about GraphCMS' features.

Are you ready?

Join our community of passionate developers!