Передача запроса от Link to server, значение запроса при первой загрузке не определено, после перезагрузки получите правильный запрос

Question

Я пытаюсь создать API для внешнего вида Adobe. Как и в заголовке, в первый раз я получаю запрос от маршрутизатора Link undefined, но после перезагрузки страницы он работает правильно. Моя главная страница

<Link 
  href={{
    pathname: "/kategoria-zdjec", 
    query: images.zdjecia_kategoria
  }}
  as={`/kategoria-zdjec?temat=${images.zdjecia_kategoria}`}
  className={classes.button}>
</Link>

и мой сервер

app
 .prepare()
 .then(() => {
   server.get("/kategoria-zdjec", async (req, res) => {
     const temat = await req.query.temat;
     console.log(temat)
     const url = `https://stock.adobe.io/Rest/Media/1/Search/Files?locale=pl_PL&search_parameters[words]=${temat}&search_parameters[limit]=24&search_parameters[offset]=1`;
      try {
        const fetchData = await fetch(url, {
          headers: { ... }
         });
         const objectAdobeStock = await fetchData.json();
         res.json(objectAdobeStock);
         const totalObj = await objectAdobeStock.nb_results;
         const adobeImages = await objectAdobeStock.files;
      } catch (error) {
         console.log(error);
      }
  });

, и это выглядит как getInitialProps на следующей странице

    Zdjecia.getInitialProps = async ({req}) => {
      const res = await fetch("/kategoria-zdjec");
      const json = await res.json();
      return { total: json.nb_results, images: json.files };
    }

Я думаю, что это связано с проблемами асинхронно.

Answer 1

Я думаю, это может быть связано с тем, что вы используете fetch, который на самом деле является частью веб-API, и это действие не выполняется при выполнении на сервере.

Вы можете либо используйте isomorphi c -fetch , который поддерживает API выборки между клиентом и сервером, либо используйте node-fetch при вызове fetch на сервере:

Zdjecia.getInitialProps = async ({ req, isServer }) => {
  const fetch = isServer ? require('node-fetch') : window.fetch;
  const res = await fetch("/kategoria-zdjec");
  const json = await res.json();
  return { total: json.nb_results, images: json.files };
}

Answer 2

Эта проблема решена, проблема была в другой части моего приложения, непосредственно в управлении состоянием, только что создали новые переменные и передали значение состояния ссылки.