GraphQL 中的 JSON 处理方案-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 作为一种 API 查询语言，已经被越来越多的应用程序广泛采用。在 GraphQL 中，查询规范和响应的数据都使用 JSON 格式表示。JSON 作为一种常用的数据交换格式，是在前端和后端之间传递数据的重要手段。然而，GraphQL 中的 JSON 处理需要注意一些问题，本文就这个话题进行探讨。

GraphQL 响应中的 JSON 处理

在 GraphQL 中，客户端发送的查询请求会得到一个 JSON 格式的响应。这个响应中可能包含嵌套的数据结构，而一些客户端则需要对这些嵌套结构进行特殊处理。下面我们来具体讨论。

扁平化响应结果

GraphQL 中，查询请求的响应通常是一个嵌套的 JSON 结构，而很多时候应用程序需要对这个结构进行扁平化，以便更方便地处理数据。

一个常用的方法是使用 lodash 函数库提供的 flatMap 函数，将 GraphQL 响应结果扁平化。

// javascriptcn.com 代码示例
import { flatMap } from 'lodash'

const query = `
  query User($userId: ID!) {
    user(id: $userId) {
      id
      name
      posts {
        id
        title
      }
    }
  }
`

const data = {
  "data": {
    "user": {
      "id": "1",
      "name": "John Doe",
      "posts": [
        {
          "id": "1",
          "title": "My first post"
        },
        {
          "id": "2",
          "title": "My second post"
        }
      ]
    }
  }
}

const flatData = flatMap(data.data.user.posts, p => ({ ...p, userId: data.data.user.id, userName: data.data.user.name  }))

上述代码中，我们查询了一个用户及其发布的两篇博客文章，然后使用 flatMap 将 posts 数组扁平化，将每篇文章和对应的用户信息合并，形成一个扁平的对象数组。

渲染嵌套数据的列表

在应用程序中，经常需要将 GraphQL 返回的数据列表进行渲染。这时需要遍历数据列表，并根据嵌套的数据结构生成不同的列表项。

一个常用的方法是使用递归组件，将每个嵌套的数据结构都转换为一个嵌套的组件结构。

例如，假设我们的应用程序需要渲染一个博客文章列表，其中每篇文章包含评论列表，并且评论可以是嵌套的。我们可以使用递归组件实现渲染。

// javascriptcn.com 代码示例
import { gql, useQuery } from '@apollo/client'

const GET_POSTS = gql`
  query {
    posts {
      id
      title
      comments {
        id
        text
        replies {
          id
          text
          user {
            id
            name
          }
        }
      }
    }
  }
`

const PostList = () => {
  const { loading, error, data } = useQuery(GET_POSTS)

  if (loading) return 'Loading...'
  if (error) return `Error! ${error.message}`

  const renderCommentList = comments => (
    <ul>
      {comments.map(comment => (
        <li key={comment.id}>
          <div>{comment.text}</div>
          {comment.replies && renderCommentList(comment.replies)}
        </li>
      ))}
    </ul>
  )

  return (
    <ul>
      {data.posts.map(post => (
        <li key={post.id}>
          <h2>{post.title}</h2>
          {post.comments && renderCommentList(post.comments)}
        </li>
      ))}
    </ul>
  )
}

上述代码中，我们使用了 useQuery 查询了一个博客文章列表，然后使用递归组件 renderCommentList 渲染了评论列表。

GraphQL 查询中的 JSON 处理

除了响应结果的处理，GraphQL 中还需要注意查询中嵌套数据结构的处理方式。下面我们来具体讨论。

GraphQL 查询嵌套数据

在 GraphQL 中，查询嵌套数据的方式是通过在查询语句中使用嵌套字段来实现。例如，我们要查询一个用户及其发布的博客文章：

// javascriptcn.com 代码示例
query User($userId: ID!) {
  user(id: $userId) {
    id
    name
    posts {
      id
      title
    }
  }
}

在 GraphQL 中，查询结果中的数据类型是由字段所在的对象类型决定的。例如在上述查询中，user 是一个对象类型，其子字段 id 和 name 的数据类型与 user 一样，而 posts 是一个数组类型。因此当我们查询 posts 字段时，需要指定其对应的子字段。

GraphQL 变量中的 JSON 处理

在 GraphQL 中，我们可以使用变量来动态传递查询参数。然而在传递 JSON 对象时，我们需要注意一些问题。

首先，GraphQL 支持直接传递一个 JSON 字符串作为变量。例如：

query User($input: String!) {
  user(input: $input) {
    id
    name
  }
}

然后我们可以将一个 JSON 对象作为字符串传递给变量：

// javascriptcn.com 代码示例
const variables = {
  input: JSON.stringify({
    id: 1
  })
}

const { data } = await client.query({
  query: USER_QUERY,
  variables
})

另外一种方法是使用 GraphQL 的 JSON 类型。例如：

query User($input: JSON!) {
  user(input: $input) {
    id
    name
  }
}

然后我们可以直接传递一个 JSON 对象作为变量：

// javascriptcn.com 代码示例
const variables = {
  input: {
    id: 1
  }
}

const { data } = await client.query({
  query: USER_QUERY,
  variables
})

注意，在某些情况下，后端 API 服务器可能不支持传递 JSON 类型的变量，这时我们只能将 JSON 对象转换为字符串进行传递。

总结

在 GraphQL 中，JSON 处理是一个重要的话题。在响应结果和查询参数中，我们都需要注意 JSON 嵌套结构的处理。本文讨论了 GraphQL 中的 JSON 处理方案及其使用方法，希望对前端开发人员有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652cdb927d4982a6ebe673d4