Ошибка сериализации реквизитов, возвращенных из `getStaticProps` в "/"

#graphql #next.js #apollo-client #strapi #graphql-js

Вопрос:

Я пытаюсь создать веб-сайт блога NextJS с помощью Strapi graphql. Но после выполнения шагов, указанных официальным источником видео strapi, я столкнулся с этой проблемой в файле home.jsx…

 Error: Error serializing props returned from `getStaticProps` in "/". Reason: Props must be returned as a plain object from getStaticProps: `{ props: { ... } }` (received: `[object Undefined]`).

Вот коды страниц Home.jsx:

 import { Fragment } from "react"; import HomePage from "./home/home"; import { ApolloClient, InMemoryCache, gql } from "@apollo/client";   export async function getStaticProps() {  const client = new ApolloClient({  url: "http:/localhost:1337/graphql",  cache: new InMemoryCache(),  });   const GET_BLOGS = gql`  query getBlogs {  blogs {  id: string  title: string  }  }  `;  let getData = client.query({ query: GET_BLOGS });  console.log(""   getData);   return { props: getData.blogs }; }  export default function Home({ blogs }) {  if (blogs) return console.log(blogs);  return (  lt;Fragmentgt;  lt;HomePage /gt;  lt;/Fragmentgt;  ); }

Возможно, проблема с зависимостями с файлом next и strapi package.json, так что вот зависимости обоих:

Зависимости пакета Nextjs.json-

 "dependencies": {  "@apollo/client": "^3.4.17",  "axios": "^0.24.0",  "graphql": "^16.0.1",  "next": "12.0.2",  "react": "17.0.2",  "react-dom": "17.0.2",  "react-toastify": "^8.1.0"  },

Зависимости от проекта Strapi:

 "dependencies": {  "knex": "0.21.18",  "sqlite3": "5.0.0",  "strapi": "3.6.8",  "strapi-admin": "3.6.8",  "strapi-connector-bookshelf": "3.6.8",  "strapi-plugin-content-manager": "3.6.8",  "strapi-plugin-content-type-builder": "3.6.8",  "strapi-plugin-email": "3.6.8",  "strapi-plugin-graphql": "3.6.8",  "strapi-plugin-i18n": "3.6.8",  "strapi-plugin-upload": "3.6.8",  "strapi-plugin-users-permissions": "3.6.8",  "strapi-utils": "3.6.8"  }, "engines": {  "node": "gt;=10.16.0 lt;=14.x.x",  "npm": "^6.0.0"  },

Ответ №1:

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

 1. Try to do finalData = getData.json(), and then destruce it like finalData.blogs() 2. Const finalData = JSON.Stringify(getData); and then use final data.

Ответ на сетевые вызовы должен быть сериализован в jsx, и, применив приведенные выше два случая, вы можете решить проблему

1. Я уже пробовал это. но это не сработало, возникла проблема с сохранением.

2. Вы готовы распечатать данные, возвращенные из graphql?

3. Да, на самом деле Axios сделал это за кулисами лучше, и приведенный выше запрос отлично работает в локальном хосте Graphql:1337/graphql. но что бы я ни пробовал, json. stringify json.parse или axios показывают одну и ту же ошибку. Я перестраиваю весь проект с нуля и чувствую, что, возможно, проблема с версией next, graphql или stripi?? но я новичок в страпи, поэтому не знаю, как это решить.

4. вот запрос, выполненный в graphql :

5. { «данные»: { «блоги»: [ { «идентификатор»: «1», «название»: «M1 против M1 Pro и M1 Max» }, { «идентификатор»: «2», «название»: «M1 против intel» } ] } }