Fetching translations based on language header with axios isn't working

user_14746448 0
Viewed 652

I'm trying to build website consist of one page containing many components. I want to fetch data for each component so I try use Promise.all() in index page but the problem is that translations from API don't appear only one language appears. I used Next.js Internationalized Routing, but when I only make axios.get() for one component it works. What is the problem & how can I solve that?

header.js

import Link from 'next/link';
import { useRouter } from 'next/router';
import en from './locales/en';
import ar from './locales/ar';
import Axios from 'axios';
import Cookie from 'js-cookie';
import {useState } from 'react';
const Header = () => {
    const router = useRouter();
    const [langCode, setLangCode] = useState('en');    
    Axios.defaults.headers.common['Language'] = langCode;

    const { locale } = router;
    const t = locale === 'en' ? en : ar;
    const changeLanguage = (locale) => {
        Cookie.set('lang', locale);
        router.push(router.pathname, router.asPath, { locale });
        setLangCode(locale);

    };
const lang = Cookie.get('lang')
    return (
        <header>
            <button onClick={() => changeLanguage(lang == 'en' ? 'ar' : 'en')}>
                change lang
            </button>
            <ul>
                <li>
                    <Link href="/">
                        <a>{t.home}</a>
                    </Link>
                </li>
            </ul>
        </header>
    );
};
export default Header;

index.js

import Axios from "axios";
import Header from "../components/Header";
const index = ({ data }) => {
  return (
    <div>
      <Header />
      <div dangerouslySetInnerHTML={{ __html:  data.details}}/>
    </div>
  );
};
index.getInitialProps = async () => {
  const res = await Axios.get(`https://api.trueapps.co/api/who-we-are`);
  const data = await res.data.data;
  return { data };
};
export default index;

AND this is the code in index.js when I use Promise.all().

index.js

import Axios from "axios";
import Header from "../components/Header";
const index = (data) => {
    console.log(data.about);
    console.log(data.services);
    console.log(data.team);
      return (
        <div>
          <Header />
        </div>
      );
    };
index.getInitialProps = async () => {

    const [about, team, services] = await Promise.all([
        fetch(`https://api.trueapps.co/api/who-we-are`).then((r) => r.json()),
        fetch(`https://api.trueapps.co/api/team`).then((r) => r.json()),
        fetch(`https://api.trueapps.co/api/services`).then((r) => r.json()),
    ]);
        return { about, team, services};

};
export default index;
axios next.js javascript
2 Answers

Looks like you are mixing Axios and fetch API together. Maybe you need to change to Axios's get instead of fetch API from the below code.

    index.getInitialProps = async () => {

    const [about, team, services] = await Axios.all([
        await fetch(`https://api.trueapps.co/api/who-we-are`).then((r) => r.json()),
        fetch(`https://api.trueapps.co/api/team`).then((r) => r.json()),
        fetch(`https://api.trueapps.co/api/services`).then((r) => r.json()),
    ]);
        return { about, team, services};

};
user_29510440

The issue is that you're setting the default Language header in axios (Axios.defaults.headers.common['Language'] = langCode;) but then making the requests using fetch.

Using axios to make the requests in index.getInitialProps should do the trick.

index.getInitialProps = async () => {
    const [aboutRes, teamRes, servicesRes] = await Promise.all([
        Axios.get(`https://api.trueapps.co/api/who-we-are`),
        Axios.get(`https://api.trueapps.co/api/team`),
        Axios.get(`https://api.trueapps.co/api/services`)
    ]);
    return {
        about: aboutRes.data,
        team: teamRes.data,
        services: servicesRes.data
    };
};
user_18707800
Related