graphql-tag：如何获取正文请求的实际字符串？答案

【问题标题】：graphql-tag: how to get the actual string for the body request?graphql-tag：如何获取正文请求的实际字符串？
【发布时间】：2022-11-21 21:46:54
【问题描述】：

我想使用图书馆https://github.com/apollographql/graphql-tag 我正在寻找比我更聪明的人，了解如何实际使用它。

假设我有一个像这样的 GraphQL 查询文档：

const query = gql`
  {
    user(id: 5) {
      ...User_user
    }
  }
  ${userFragment}
`

我现在如何获取要添加到 http 正文请求中的字符串？我最终得到了一个对象，它允许我进行一些自省和操作，这很好，但是如何获取服务器请求的实际正文字符串呢？

我想我错过了一些明显的东西......

【问题讨论】：

标签： javascript graphql apollo-client graphql-js graphql-tag

【解决方案1】：

通过将 qql 应用于 graphql 查询代码获得的对象是 graphql 的 AST（抽象语法树）。这个 AST 通常与 apollo-client 一起使用来执行请求。但是，您可以使用任何其他能够使用 AST 执行 GraphQL 请求的库。

假设您愿意使用 Apollo，下面是他们网站上的示例 (https://www.apollographql.com/docs/react/data/queries)。

import { gql, useQuery } from '@apollo/client';

const GET_DOGS = gql`
  query GetDogs {
    dogs {
      id
      breed
    }
  }
`;

function Dogs({ onDogSelected }) {
  const { loading, error, data } = useQuery(GET_DOGS);

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

  return (
    <select name='dog' onChange={onDogSelected}>
      {data.dogs.map((dog) => (
        <option key={dog.id} value={dog.breed}>
          {dog.breed}
        </option>
      ))}
    </select>
  );
}

此示例适用于带有钩子的 React（这是使用 Apollo 的主要方式）。如果您仍然想使用 Apollo 但不使用 React，那么您可以使用裸 ApolloClient 并仍然使用您的 AST 来运行查询。请参阅下面的链接以了解如何直接使用 ApolloClient。

https://www.apollographql.com/docs/react/api/core/ApolloClient/

最后，如果您不愿意使用 Apollo 和/或 AST，您可以直接执行查询。在这种情况下，您不需要使用 gql 并将其解析为 AST。请参阅下面的简化但有效的示例。

const query = `
query($id: Int!) {
    user(id: $id) {
        id
        login
        email
    }
}
`;

const variables = {
    id: 5
};

const result = await fetch("http://your-graphql-backend.tld", {
    method: "POST",
    body: JSON.stringify({
        query,
        variables,
    }),
    headers: {
        "content-type": "application/json",
    }
});

注意：上面的实现（尤其是查询部分）取决于您的 GraphQL 架构和后端实现。它可能有所不同，但原则上，这应该适用于大多数现代 graphql 后端。

【讨论】：

【解决方案2】：

回答原来的问题：

我现在如何获取要添加到 http 正文请求中的字符串？

假设在上面的例子中你已经解析为 AST，出于使用片段的原因（或出于其他原因，请参阅https://github.com/apollographql/graphql-tag#why-use-this）

在这种情况下，您可以使用 graphql 的打印辅助函数将 AST 解析为字符串，如下所示：
import gql from 'graphql-tag';
import { print } from 'graphql/language/printer';

const AST = gql`
  {
    user(id: 5) {
      ...User_user
    }
  }
  ${userFragment}
`
const query = print(AST);

【讨论】：