使用 Apollo GraphQL 出现“不变违规”错误

Question

我正在使用 Apollo GraphQL，但我是新手，并且收到以下错误：

{
    "framesToPop": 1,
    "name": "Invariant Violation"
}

这是我的代码：

const httpLink = createHttpLink({
    uri: "https://api.example.com/v3/ListingsQuery",
    fetch
});
const automaticPersistedQueryLink = createPersistedQueryLink();
const apolloClient = new ApolloClient({
    link: ApolloLink.from([automaticPersistedQueryLink, httpLink]),
    cache: new InMemoryCache()
});
const variables = {
    filters: {statuses: ["ACTIVE", "UNLISTED"]},
    orderBys: [{sortField: "STATUS", sortOrder: "DESC"}],
    shouldFetchHostMultiListingAgendaPermissions: true,
    offset: 0,
    shouldFetchListingPermissions: false,
    count: 15,
    query: null
};
await apolloClient.query({
    query: {},
    variables
});

知道我做错了什么吗？

Answer 1

首先，Apollo 似乎是以“生产模式”而不是“开发模式”启动的。通过在开发模式下启动它，Apollo 将为您提供更详细的错误消息。要解决此问题，请将

env.NODE_ENV

设置为

development

来启动节点进程。如果不清楚，很抱歉，但我在这里无法更准确，因为确切的过程取决于您的应用程序如何启动和/或您正在使用哪个框架......

不过，在最近的版本中，在生产模式下运行时，错误消息中应该有一个数字错误代码，例如

Invariant Violation: 42

。这些数字错误代码使诊断问题变得更加容易，即使在生产模式下也是如此。确保您使用的是最新版本的 @apollo/client（我撰写本文时最新版本为 3.2.5；请参阅 https://www.npmjs.com/package/@apollo/client）。

现在，关于错误本身...完整的错误消息很可能是

Invariant Violation: You must wrap the query string in a "gql" tag.

这是因为您提供了一个空查询，如下所示：

await apolloClient.query({
    query: {},   // <--- Empty query here
    variables
});

有多种方法可以向 Apollo 客户端提供查询。最简单的方法是使用“gql tag”表示法将 GraphQL 查询嵌入到 JavaScript 源代码中，如下所示：

await apolloClient.query({
    query: gql`
      query TestQuery {
        launch(id: 56) {
          id
          mission {
            name
          }
        }
      }
    `,
    variables
});

这应该是开箱即用的，但出于性能原因，您应该在构建过程中添加 GraphQL 编译步骤。也许这个过程已经就位（例如，如果您使用 Create React Apps 或 Gatsby 等框架启动项目......）。请参阅此文档以获取对此的解释（https://www.apollographql.com/docs/react/performance/babel/）。