How to handle i18n with GRANDstack?

[AdrienLemaire]

Hi there,

How do you handle internationalization and localization on your applications?

Their documentation describes a custom intl directive, but they aren't sharing the code of the translate() method in question.

This StackOverflow thread suggests several methods for handling internationalized user data in neo4j. Is there a best practice recommended?

For static text translations, I suppose that I'll have to go with either react-intl or react-i18next. Do you have experience with them and recommend one over the other in the context of a grandstack?

[lennertVanSever]

There are many ways you can tackle internationalisation and the GRANDstack is no exception. In my Graph Countries API, I solved it in the following way:

Graph structure

The green circle is a country with a property name which always has an English value. Countries have relationships called [:hasLocale] that connect to a Translation node, these nodes always have a languageCode and value property. For example:

languageCode: "pt"
value: "Ilhas de Aland"

As you can see, it's a simple structure.

The GraphQL schema

In the GraphQL schema, I implemented it in the following way

enum LanguageCode {
  fa
  hr
  nl
  pt
  br
  it
  ja
  fr
  es
  de
}

type Translation {
  _id: String!
  languageCode: String!
  value: String!
}

type Country {
  name: String!
  nameTranslation(languageCode: LanguageCode = nl): String
  @cypher(
    statement: """
      MATCH (this)-[:hasLocale]->(translation:Translation { languageCode: languageCode })
      RETURN translation.value
    """
  )
  nameTranslations: [Translation] @relation(name: "hasLocale", direction: "OUT")
}

The enum is quite handy since then the consumer has autocompletion and the available languages are auto documented.
With the nameTranslations field, the user can query multiple translations if he wants for some reason.

You can try the above query with the following code or via the playground:

fetch('https://countries-274616.ew.r.appspot.com', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ query: `
    query {
    Country(alpha2Code: "BE") {
      name
      nameTranslation(languageCode: it)
    }
  }

` }),
})
  .then(res => res.json())
  .then(res => console.log(res.data));

You can find the full implementation of the schema here