Блог

У меня возникает проблема с использованием выборки в СЛЕДУЮЩЕМ JS с помощью функции getServerSideProps. Поскольку я начинаю с этой платформы, я, вероятно, делаю это не очень хорошо. Все учетные данные для доступа к внешнему API верны. Он приносит мне информацию, когда я выполняю выборку, используя те же параметры в React, однако со следующим JS он возвращает 400 — неверный запрос.

Я поместил все параметры в один и тот же блочный код ниже, чтобы его было легче понять. Я использую параметры учетных данных, такие как «», для обеспечения конфиденциальности. Они верны, и с ними нет проблем.

Примечание: я считаю, что я, должно быть, неправильно использую функцию getServerSideProps. Я не знаю, нужно ли мне делать какие-либо настройки в Next JS, кроме как просто написать функцию. Другими словами, здесь показано то, что я на самом деле написал до сих пор. Эта программа вызывается непосредственно из index.js .

Вот структура папок:

структура папок

ListOrders — это место, где я отображаю страницу. Он получает {orders} в качестве реквизита из функции getServerSideProps, где я выполняю выборку.

 const ListOrders = ({ orders }) => {
  // Render orders through server side rendering (SSR)
  return (
    <div>
      {/* If orders is an object than map over it to render the page, otherwise orders is an error message */}
      {typeof orders != "string" amp;amp; orders.length > 0 ? (
        showOrders(orders)
      ) : (
        <h5>{orders}</h5>
      )}
    </div>
  );
};

const showOrders = (orders) => {
  {
    orders.list.map((o, i) => <h3 key={i}>{o.orderId}</h3>);
  }
};

export async function getServerSideProps() {
  // URL PARMS
  const accountName = "<conta>";
  const environment = "<ambiente usado>";
  const filter = "orders";

  // OPTIONS PARMS
  const accept = "application/json";
  const contentType = "application/json; charset=utf-8";

  // SET ACCESS CREDENTIALS
  const appKey = "<chave>";
  const appToken = "<token>";

  // DEFINE URL TO FETCH LIST ORDERS WITH FILTER PARMS
  const url = `https://${accountName}.${environment}.com.br/api/${filter}`;

  // DEFINE OPTIONS ACCORDING TO API

  const options = {
    method: "GET",
    headers: {
      Accept: accept,
      "Content-Type": contentType,
      "API-AppKey": appKey,
      "API-AppToken": appToken,
    },
  };

  // FETCH LIST ORDERS
  const res = await fetch(url, options);

  if (!res.ok) {
    //*! Fetch error: Client (400–499) or Server errors (500–599) (Return error message to the page)
    const qs_str = JSON.stringify(options.qs);
    const headers_str = JSON.stringify(options.headers);

    const statusDescription = setStatusDescription(res.status);

    const orders = `Error: ${res.status} ${statusDescription} ${url} ${options.method} - ${qs_str} - ${headers_str}`;
    return { props: { orders } };
  }

  const data = await res.json();

  if (!data) {
    //*?  Fetch not found (Return 404 to the page)
    return { notFound: true };
  }

  //* Fetch is OK and returning data as expected (Return object orders to the page)
  const orders = JSON.parse(JSON.stringify(data)); 
  return { props: { orders } };
}
 

Даже если я изменю выборку для axios, у меня все равно будет та же ошибка 400. Я знаю, это звучит жалко, но я хотел бы отметить, что в самой выборке нет ничего плохого. Проблема должна быть в том, как работает NEXT JS.

  // FETCH LIST ORDERS

  let orders;

  try {
    const response = await axios.get(url, options);
    //*? Fetch is OK and returning data as expected (Return object orders to the page)
    const ordersList = response.data;
    orders = JSON.parse(JSON.stringify(ordersList)); 
  } catch (error) {
    //*! Fetch error: Client (400–499) or Server errors (500–599) (Return error message to the page)
    const qs_str = JSON.stringify(options.qs);
    const headers_str = JSON.stringify(options.headers);
    orders = `Error 2: ${error} ${url} ${options.method} - ${qs_str} - ${headers_str}`;
  }
  return { props: { orders } };
}