How to integrate i18n translation resource saved as JSONB data and fetched with REST API on React?

Solution Steps

1. Designing the Data Model and API

First, design the backend data model and corresponding REST API endpoints. These APIs handle the storage and retrieval of JSONB data and provide endpoints to access and update i18n resources.

• Data Model: If using a database that supports JSONB (e.g., PostgreSQL), create a model with a JSONB field dedicated to storing multilingual data.
• REST API: Design the REST API to accept and store JSONB data in the database. Additionally, design endpoints to query and update i18n translation resources.

2. Integrating the Database and API into the Backend Application

Use your chosen backend technology (e.g., Node.js, Python) to integrate database operations. Ensure the API correctly processes JSONB-formatted data and provides necessary endpoints for managing i18n resources.

3. Building the Frontend with React

In the React application, build the user interface to interact with these APIs.

• Data Storage: Create forms or interfaces for users to input data and submit JSONB-formatted data to the backend via the API.
• Internationalization: Use libraries like react-i18next to integrate i18n. Configure the library to fetch translation resources from your REST API.

4. Communicating with REST API Using Axios or Fetch

In React, use axios or fetch to handle interactions with the REST API, including sending data and requesting translation resources.

• Sending Data: When users submit data, use axios.post or fetch's POST method to send data to your API.
• Fetching Translation Resources: Fetch the latest translation resources from the API upon application startup or when the user changes the language.

5. Testing and Optimization

After integrating all components, perform thorough testing to ensure proper functionality. Verify that data is correctly stored as JSONB and that translations load according to the user's language preference.

Example

Suppose you have a form for collecting user feedback, and you want this data stored in JSONB format with the form supporting multiple languages.

Backend (Node.js + Express + PostgreSQL):

javascript
const express = require('express');
const bodyParser = require('body-parser');
const { Pool } = require('pg');

const pool = new Pool({
  connectionString: 'Your database connection string'
});

const app = express();
app.use(bodyParser.json());

app.post('/api/feedback', async (req, res) => {
  const { feedback, language } = req.body;
  const query = 'INSERT INTO feedbacks(data) VALUES($1) RETURNING *';
  const values = [{ feedback, language }];

  try {
    const { rows } = await pool.query(query, [values]);
    res.status(201).json(rows[0]);
  } catch (err) {
    res.status(500).json({ error: 'Internal Server Error' });
  }
});

app.listen(3000, () => console.log('Server running on port 3000'));

Frontend (React + Axios):

javascript
import React, { useState } from 'react';
import axios from 'axios';
import { useTranslation } from 'react-i18next';

function FeedbackForm() {
  const { t, i18n } = useTranslation();
  const [feedback, setFeedback] = useState('');

  const handleFeedbackChange = (event) => {
    setFeedback(event.target.value);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const response = await axios.post('/api/feedback', { feedback, language: i18n.language });
      console.log('Saved:', response.data);
    } catch (error) {
      console.error('Error saving feedback:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        {t('feedbackLabel')}
        <textarea value={feedback} onChange={handleFeedbackChange} />
      </label>
      <button type="submit">{t('submit')}</button>
    </form>
  );
}

export default FeedbackForm;

In this example, we design a simple backend to receive and store JSONB data, and a React frontend form to submit this data while supporting multiple languages.