نحوه apiClient نویسی در React.js

سلام.

// src/axios/index.js
export const getDataInstance = axios.create({
    method: "GET",
    baseURL: "http://localhost:8000/api",
    headers: {
        "Content-Type": "application/json",
        // Authorization: "<auth token>",
        // ...
    },
});

// src/services/apiOrders.js
export const geOrders = async () => {
    const {data: orders} = await getDataInstance("/orders")
    return orders
}

در فایل اول axiosInstance ها رو مینویسید. در فایل دوم api های مربوط به سفارشات. در یک فایل دیگه از همین فلدر به طور مثال api های مربوط به محصولات. هم میتونید اورراید کنید هم به صورت کاملا انتزاعی نگهش دارید، به پروژتون بستگی داره.
کاستوم هوک ها هم در فلدر features

src/features/orders/hooks/useGetOrders.js

این روی بورس ترین روش ساختار فایل پروژه های react هست که هرچند سال یکبار هم داره تغییر میکنه

@Pouyab
باسلام و احترام تشکر از پاسخگویی شما
فقط اینکه برای hook هم یک مثال بزنید لطفا
و آیا همین چیزی که شما فرستادین مفهوم apiClient نویسیه ؟

apiClient یک ابزار توسعست. یه چیزی مثل postman که با دانش کم کد نویسی هم میتونید به تست api هایی که ایجاد شده بپردازید یا برحسب نیازتون کانفیگش کنید تا قابلیت استفاده مجدد رو داشته باشه. با کد های بالا شما راه استفاده از api در برنامه react خودتون رو کوتاه تر میکنید.

export const useGetOrders = () => {
    const {data: orders = [], isLoading, isError, error} = useQuery({
        queryKey: [queryKeys.orders],
        queryFn: getOrders,
        // staleTime: 10000,
        // refetchInterval: 20000,
        // refetchOnWindowFocus: True,
        // refetchOnReconnect: True,
        // refetchOnMount: True,
    })

    return {orders, isLoading, isError, error};
}

برای remote state ها من از react-query استفاده میکنم. براساس state management مورد استفادتون میتونید تغییرش بدید. مهم چیزی هست که برگشت میدید

@Pouyab

من تا به حال از useQuery استفاده نکردم ولی خیلی اسمش به گوشم خورده اما نه برای api
من فکر کردم فقط برای ست کردن پارامتر در url و گت کردنش استفاده میشه
میشه بیشتر دربارش توضیح بدین ؟
اصلا اسم اصلیش useQuery هست یا react query ؟

دوست عزیز اگر توضیحات من کمکی بهتون میکرد باور کنید واستون طومار مینوشتم. مشخص هست که شما اول راه هستید. پس پیشنهاد میکنم یک مسیر آموزشی که امتحانشو پس داده رو پیش بگیرید و عجله رو هم بزارید کنار تا اینجور همه مسایل رو با هم قاطی نکنید و فقط یک اسم از هرچیزی شنیده باشید. به وقتش مفهوم هر چیزی رو درک میکنید، یاد میگیرید و در آخر پیاده سازی میکنید.

@Pouyab
من فکر میکنم شما متوجه سوال نشدید دقیقا!
متوجه جوابتون شدم اما این جواب آخه اون چیزی نیست که من دنبالشم
من میتونم با هر روشی که بخوام پروژه رو پیاده سازی کنم ولی به دنبال bestPracie برای apiClient نویسی هستم
من راه های زیادی رو برای معماری api امتحان کردم و همه هم کار کردن ولی به دنبال bestPracticeش هستم این چیزی که شما گفتین خیلی راه معمولی هست
تقریبا به دنبال چیزی شبیه به class نویسی برای api هستم یک معماری حرفه ای برای apiclient نویسی که در پروژه های بزرگ به کار میره
بازم ممنونم از پاسخگویی شما

عزیز گفتم که apiclient ابزار هست . شما از این ابزار api collection و یا env collection دریافت میکنید.
best practise استفاده از api و ساختار فایل در برنامه های react هم همین مواردی هست که گفتم. از خودم هم درنمیارم. آموزش دیدم و تحقیق کردم. از هر برنامه نویس react که سابقه کافی داشته باشه میتونید بپرسید.
شما یک اسم رو مدام تکرار میکنید در صورتی که اصلا نمیدونید چی هست یا حتی در چه قالبی استفاده میشه.واسه همین هم هست که بعد از چندروز جستجو هنوز به جوابی نرسیدید.
به هرحال هدف بنده کمک بود . امیدوارم در روزهای آینده به پاسختون برسید و بنده رو هم مطلع کنید

@Pouyab
با سلام و احترام

من فعلا از این روش دارم استفاده میکنم که Type هم داره و میخوام ببینم فعلا این روش اوکی هست یا نه :

import axios from "axios";

// const accessToken = localStorage.getItem('access_token');

const api = axios.create({

  baseURL: 'https://newsapi.org/v2/', 
  timeout: 10000, 
  headers: {
    'Content-Type': 'application/json', 
    'X-Api-Key': '8ef1a991a4f1473a97f166fde655b684yuacc1',
    // 'Authorization': `Bearer ${accessToken}`,
  },

});

export default api;

و این هم یک هوک هست که get میکنه از newsApi

import { useState, useEffect } from "react";
import api from "../../config/api";

const useGetAppleArticleApi = () => {
  const [articles, setArticles] = useState([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const params = {
          q: 'apple',
          from: '2024-03-03',
          to: '2024-03-03',
          sortBy: 'popularity'
        };

        // Ensure axiosConfig is properly typed as AxiosInstance
        const data = await api.get('everything',{params});
        setArticles(data.data);
        setLoading(false);
      } catch (error) {

        setError(error as Error);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return { articles, loading, error };
}

export default useGetAppleArticleApi;

using :

 const { articles, loading, error } = useGetAppleArticleApi();

کلا یک فایل api سراسری وجود داره برای config و میشه از هوک ها هم برای دیتاهایی که تکراری هستن استفاده کرد مثلا یه هوک بسازم برای اطلاعات کاربران تا هر بار براش یه request ندم.

آیا این روش معمول و خوبی هست ؟

سلام.
مشکل اصلی کد شما این هست که از state management مناسبی استفاده نکردید. state management های خود react مناسب محیط پروداکشن و یا حتی ui state نیستن. جز موارد استثنا مثل compound component ها برای context یا state هایی که تنها مختص یک کامپوننت هستند و قرار نیست پیچیده باشند. شما امروزه تقریبا هیچ وب اپ داینامیک reactی رو نمیبینید که از caching استفاده نکنه.

یکی دومورد تایپ دردی رو دوا نمکینه. هیچ اینترفیسی رو هم توی کد نمییینم. اگر قرار هست تایپ تعریف کیند برای کل پروژه انجامش بدبد.
fetchData رو هم از داخل useEffect بردارید.
یک فایل برای api های مربوط به یک مورد خاص. در این مورد مقالات. یک فایل هم برای apiConfig ها

@Pouyab
باسلام ممنون از پاسخگویی شما
اینترفیس تعریف کرده بودم ولی کن به دلیل اینکه امکان تغیر در آیتم های اندپوینت در آینده یعنی کم و زیاد شدن وجود داشت بناچار برش داشتم چون تازه هم دارم تایپ کار میکنم.

و منظورتون از یک فایل مربوط به api های خاص دقیقا چی بود؟

و اینکه منظور شما از api config همین مورد اولی هست که فرستادم ؟

من با کمک دوره آموزشی react و سوال از stackOverflow و GPT و ... پروژه رو پیاده سازی میکنم ولی واقعیتش به دنبال این هستم تا خیلی بهتر و درست تر react رو یاد بگیرم با مفاهیم مهمی مثل کامپوننت نویسی و استیت منیجمنت های redux و ... کار کردم اما هیچوقت چیزی رو کافی ندونستم از نظر استایل ها و js هم سعی کردم پیور کد بزنم تا css و js قوی بشه ولی گرچه بهترین منبع ها تجربه دیگران هست اما بازهم اگر شما از منابع خوبی مطلع هستین تا بتونه رشد خوبی در react ایجاد کنه دریغ نکنین.

تشکر از وقتی که گذاشتین