How to query by localized field data?

Technical Questions
1

Builder public api key
19df7a9799d34a46b5ed0010ee47fd78

Code stack you are integrating Builder with
NextJS

What are you trying to accomplish
We’re looking into using Builder.io but need the ability to have translated URLs. For example, English (default) would be /features and German would be /funktionen.

Since Builder doesn’t support this natively, I figured I could create a separate field translatedPageUrl and then query by it. However, I can’t seem to get the query right to find a page by its translatedPageUrl value.

I’ve tried a few different things, e.g.

    page = await builder
      .get("page", {
        query: {
          // I have also tried nesting differently, with and without the de-DE, with and without `.eq` etc. From the docs it's not really clear how to query by localized content
          "data.translatedPageUrl.de-DE": "/builder/builder-uebersetzungs-test",
        },
        // I have tried with and without this:
        // options: {
        //   locale: "de-DE",
        // },
      })
      .toPromise()
2

Hello @paro22,

Welcome to the builder.io forum post.

To query for a page by a localized translatedPageUrl field, you need to ensure the following:

  1. The translatedPageUrl field is marked as localized in your model settings.
  2. Your query correctly targets this localized field.

Below is a specific example using Next.js to perform this query:

1. Mark the Field as Localized

First, make sure the translatedPageUrl field is set to be localized.

  1. Go to the Models section of Builder.
  2. Open the model you want to add the localized field to.
  3. Click on the field (or create a new one) and toggle the Localize switch to the on position.
  4. Save the model.

2. Querying in Code

Use the following code to perform the query. Note the use of locale and the format for querying localized fields:

import { builder } from '@builder.io/sdk';

// Replace with your Public API Key
builder.init(YOUR_API_KEY);

async function getPage(locale, translatedPageUrl) {
  const page = await builder
    .get('page', {
      options: { locale },
      query: {
        [`data.translatedPageUrl.${locale}`]: translatedPageUrl,
      },
    })
    .toPromise();
  return page;
}

// Example usage
const locale = 'de-DE';
const translatedPageUrl = '/builder/builder-uebersetzungs-test';

getPage(locale, translatedPageUrl).then((page) => {
  console.log(page);
});

Integrating Localization

To fully leverage localization, ensure you have integrated Builder’s localization with your codebase. The following steps are essential:

Here are some relevant links and docs for further reading:

By following these guidelines, you should be able to handle the querying of localized URLs effectively in Builder.io. If there are any issues or further questions, feel free to reach out!

3

Thanks for the quick response, Manish!

  • I have done the set up you mentioned by creating a “de-DE” locale and updating the BuilderComponent
  • The translatedPageUrl field is marked as localized
  • From what I can tell in the JSON view of the page, the locale is called “de-DE”
  • I’ve used the exact query you mentioned except that (for testing) I didn’t make the locale a parameter
  • Even if I test this through the REST API Explorer, no results are returned
4

I’m also interested since I have the same issue. I’ve tried multiples combinations and still nothing works. Hopefully this get answered soon.

5

Hello @paro22, @yanick,

To query the localized title field for a specific locale, you can make a direct API call using fetch in JavaScript.

const apiKey = 'YOUR_API_KEY';
const modelName = 'your-model-name';
const locale = 'en-FR'; // Replace with your desired locale

async function getLocalizedContent() {
  const query = {
    "data.title": {
      [`${locale}`]: "Test model FR"
    }
  };

  const response = await fetch(`https://cdn.builder.io/api/v2/content/${modelName}?apiKey=${apiKey}&query=${encodeURIComponent(JSON.stringify(query))}&locale=${locale}`);
  const content = await response.json();

  console.log(content);
}

getLocalizedContent();

Here is a rest API example

{
  "query.data.title.en-FR":"Test model FR"
}

https://cdn.builder.io/api/v3/content/test-model?apiKey=c782aff3c66f48acb425981b997feb10&query.data.title.en-FR=Test%20model%20FR&limit=3

Refer to the Builder Content API documentation for more details on querying content and handling localized fields.