javascript graphql -如何修改返回数据的结构

uoifb46i 于 2023-06-28 发布在 Java

关注(0)|答案(1)|浏览(74)

背景

我的网站是使用Gatsby创建的，还有strapi（提供graphql查询）和apollo client用于获取数据。

当前实现我刚开始在我的应用程序中集成strapi。

getArticles.ts

import { gql } from "@apollo/client";

export const GET_ARTICLES = gql`
  query Article {
    articles {
      data {
        id
        attributes {
          title
          description
          date
        }
      }
    }
  }
`;

我用在

const { loading, error, data } = useQuery(GET_ARTICLES);

当我记录data时，它看起来像

{
  "data": {
    "articles": {
      "data": [
        {
          "id": "1",
          "attributes": {
            "title": "Article 1",
            "description": "This is the first article",
            "date": "2023-06-23"
          }
        },
        {
          "id": "2",
          "attributes": {
            "title": "Article 2",
            "description": "This is the second article",
            "date": "2023-06-24"
          }
        }
      ]
    }
  }
}

预期行为data实际上是

[
        {
          "id": "1",
          "attributes": {
            "title": "Article 1",
            "description": "This is the first article",
            "date": "2023-06-23"
          }
        },
        {
          "id": "2",
          "attributes": {
            "title": "Article 2",
            "description": "This is the second article",
            "date": "2023-06-24"
          }
        }
]

我不知道我应该修改哪一层来达到上面的效果。有人能对此提出建议吗？
gatsby-configs.ts

{
      resolve: "gatsby-source-strapi",
      options: {
        apiURL: process.env.STRAPI_API_URL || "http://127.0.0.1:1337",
        accessToken: process.env.STRAPI_TOKEN,
        collectionTypes: [
          {
            singularName: "article",
            queryParams: {
"preview" : "live",
              populate: {
                cover: "*",
                blocks: {
                  populate: "*",
                },
              },
            },
          }
        ]
      },
    },

更新1回复评论，是的，我可以在我的组件文件中添加一个额外的代码，如const myData = data?.articles.?data。

然而，这意味着我必须在每个graphql查询之后添加这行代码。这就是为什么我想知道，由任何机会，我可以只是检索数据，我想要的，就像我在后显示

JavaScript

来源：https://stackoverflow.com/questions/76549304/graphql-how-to-make-modify-the-structure-of-the-returned-data

1条答案

按热度按时间

ymdaylpp1#

你不会得到你想要的东西，因为上层data对象必须存在。最好的办法是修改schema，使此查询：

import { gql } from "@apollo/client";

export const GET_ARTICLES = gql`
  query Article {
    articles {
      data {
        id
        attributes {
          title
          description
          date
        }
      }
    }
  }
`

变成这个查询：

import { gql } from "@apollo/client";

export const GET_ARTICLES = gql`
  query Article {
    articles {
      id
      attributes {
        title
        description
        date
      }
    }
  }
`

因此，articles将返回一个类型为article的数组，因此它看起来像这样：

{
  "data": {
    "articles": [
      {
        "id": "1",
        "attributes": {
          "title": "Article 1",
          "description": "This is the first article",
          "date": "2023-06-23"
        }
      },
      {
        "id": "2",
        "attributes": {
          "title": "Article 2",
          "description": "This is the second article",
          "date": "2023-06-24"
        }
      }
    ]
  }
}

要获取所需格式的数据，您可以执行以下操作：

const articles = data.articles

它将提供你要找的数组。如果Strapi提供了查询和模式，那么您可能需要查看他们的文档，看看这是否可行。否则，您将需要执行类似const articles = data.articles?.data的操作来获取条目数组。

赞(0）回复(0）举报 2023-06-28

我来回答

javascript graphql -如何修改返回数据的结构

1条答案

相关问题

热门标签

最新问答