Ask for help with GraphQL issue during i18next setup on gatsby-theme-minimal-blog

[romanr111]

Dear Lennart and LekoArts community,

I am currently using your gatsby-theme-minimal-blog template for a project I am working on. While it's been a great asset, I've run into a hurdle that I'm unable to overcome and would greatly appreciate your help.

I'm trying to integrate react-i18next and gatsby-plugin-react-i18next into my blog.

The problem is with the GraphQL part of the setup, and I suspect it may be related to the use of that template. Despite several attempts to follow various guides, I've been unsuccessful. These are the guides I tried:

1. https://lokalise.com/blog/gatsby-i18n/
2. https://locize.com/blog/gatsby-i18n/

The problem arises when the UI starts placing variable names instead of the actual text from locale files. For example, the UI uses 'hero.greeting' and 'hero.description' from the hero.tsx file instead of the translated text. Here's the corresponding code snippet from my project:

import React from 'react';
import { Text } from 'theme-ui';
import { useTranslation } from 'gatsby-plugin-react-i18next';

const HeroTextComponent = () => {
  const { t } = useTranslation();
  return (
    <div>
      <Text sx={{ fontSize: [3], fontWeight: `bold`, color: `heading` }}>
        {t('hero.greeting')}
      </Text>
      <p>{t('hero.description')}</p>
    </div>
  );
};

export default HeroTextComponent;

It appears to me that the useTranslation() hook doesn't fetch the text from the locale files correctly. I suspect that I might be missing some necessary configurations in GraphQL or the Gatsby theme, which are causing this issue.

Sadly, I don't have much experience with React/GraphQL/Gatsby to fix this.
Could you please shed some light on how to resolve this? Your expert guidance and assistance would be greatly appreciated.

Best regards,

Roman Rud