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

Question

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

假设我有一个 GraphQL 查询文档，如下所示：

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

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

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

Answer 1

通过应用 graphql 查询代码获得的对象qql是 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 后端。