useQuery 返回未定义，但在 gql 操场上返回数据

Question

"@apollo/react-hooks": "^3.1.3",
"apollo-client": "^2.6.8",

Apollo 客户端在反应应用程序上返回未定义但在 gql 操场上返回数据，我不明白为什么它不能在客户端工作但在 graphql 操场上工作。

架构

我已经为用户查询定义了联合以进行错误处理。

type Query {
  user(id: ID!): UserReturn!
}

union UserReturn = User | Error

type User {
  id: ID!
  username: String!
  email: String
  profileUrl: String
  createdAt: Date
  ads: [Doc!]!
}


type Error {
  message: String
  code: ID
}

查询解析器

 async user(_, { id }, { User }) {
    console.log('query - User')
    try {
      await delay(1000 * 3)
      const user = await User.findById(id).populate('userData')
      console.log(user)
      if (!user) return {
        __typename: 'Error',
        message: 'User not found.',
        code: id
      }

      const { _id: id, username, email, createdAt, userData: { profileUrl } } = user

      console.log(username)
      return {
        __typename: 'User',
        id,
        username,
        email,
        createdAt,
        profileUrl
      }
    } catch (err) {
      console.log(err)
      return {
        __typename: 'Error',
        message: 'Something went wrong while getting user.',
        code: LogBack(err, `query/user?id=${id}`, __filename)
      }
    }
  }

在 gql 操场上查询时

在 graphql 操场上，查询有效。

在客户端

 const { data } = useQuery(
    gql`query user($id: ID!) {
      user(id: $id) {
        __typename
        ... on User {
          id
          username
          email
          profileUrl
          createdAt
          # ads
        }
        ... on Error {
          message
          code
        }
      }
    }
    `,
    {
      variables: {
        id: userId
      }
    }
  );

  console.log(data) // undefined

useQuery 运行但返回 undefiend。

Answer 1

请耐心等待，因为这个答案很长。

我也遇到了这个问题。 似乎在使用片段（在本例中为内联）和接口时会出现问题。 我设法通过将正确的内省数据传递给 Apollo 的启发式片段匹配器来解决它（参见第 3 步）。

这是有关如何解决它的详细分步指南：

1 - 验证控制台警告。

验证您的控制台中是否有警告（这是发生在我身上的一个示例）。 这些是与默认启发式片段匹配器冲突的字段：

阅读 Apollo 文档，我发现了以下内容：

默认情况下，Apollo 客户端的缓存将使用启发式片段匹配器，它假设如果结果包含其选择集中的所有字段，则片段匹配，并且当缺少任何字段时不匹配。 这在大多数情况下都有效，但这也意味着 Apollo Client 无法为您检查服务器响应，并且它无法告诉您何时使用 update、updateQuery、writeQuery 等手动将无效数据写入存储。此外，启发式当使用带有联合或接口的片段时，片段匹配器将无法准确工作。 如果 Apollo Client 尝试使用带有联合/接口的默认启发式片段匹配器，它将通过控制台警告（开发中）让您知道这一点。 IntrospectionFragmentMatcher 是使用联合/接口的解决方案，下面将更详细地解释。

v2 的更多信息： https ://www.apollographql.com/docs/react/v2.6/data/fragments/#fragments-on-unions-and-interfaces

v3 的更多信息： https ://www.apollographql.com/docs/react/data/fragments/#using-fragments-with-unions-and-interfaces

为了解决这个问题，我们需要将 IntrospectionResultData 传递给 Apollo 客户端（参见步骤 3）。 但在此之前，我们需要生成文件或数据。

你有 3 个选项。 手动或自动（远程或本地）执行此操作。

2 - 生成自省文件

选择以下选项之一（所有选项最终都相同）。 在选择一个之前阅读所有这些。

2.1 - 选项 A - 手动生成文件。

使用以下架构使其适应您自己的架构。 请注意，以下是 TypeScript 代码。 如果您使用的是纯 JS，请删除type 。

请注意，在我的情况下，我的 .gql 文件中有一个以下方式的联合类型：

   # GraphQL code omitted. 
  union PlanningResult = Planning | PlanningTechnical

// For Apollo V 2.x
export interface IntrospectionResultData {
  __schema: {
    types: {
      kind: string;
      name: string;
      possibleTypes: {
        name: string;
      }[];
    }[];
  };
}

const result: IntrospectionResultData = {
  __schema: {
    types: [
      {
        kind: 'UNION',
        name: 'PlanningResult',
        possibleTypes: [
          {
            name: 'Planning',
          },
          {
            name: 'PlanningTechnical',
          },
        ],
      },
    ],
  },
};
export default result;

// For Apollo V3:

      export interface PossibleTypesResultData {
        possibleTypes: {
          [key: string]: string[]
        }
      }
      const result: PossibleTypesResultData = {
  "possibleTypes": {
    "PlanningResult": [
      "Planning",
      "PlanningTechnical"
    ]
  }
};
      export default result;
    

完成此操作后，继续执行第 3 步。

2.2 - 选项 B - 自动远程进近。

这是如果您在远程服务器中有您的架构并且您想获取它。 这是直接从 Apollo Docs 中提取的脚本。 对于自动方法，您可以按照 Apollo Docs 中的说明直接获取模式：

// This is for V2 only, for V3 use the link down below (They're not the same!).

// For V2: https://www.apollographql.com/docs/react/v2.6/data/fragments/#fragments-on-unions-and-interfaces
// For V3 please, go to https://www.apollographql.com/docs/react/data/fragments/#generating-possibletypes-automatically

const fetch = require('node-fetch');
const fs = require('fs');

fetch(`${YOUR_API_HOST}/graphql`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    variables: {},
    query: `
      {
        __schema {
          types {
            kind
            name
            possibleTypes {
              name
            }
          }
        }
      }
    `,
  }),
})
  .then(result => result.json())
  .then(result => {
    // here we're filtering out any type information unrelated to unions or interfaces
    const filteredData = result.data.__schema.types.filter(
      type => type.possibleTypes !== null,
    );
    result.data.__schema.types = filteredData;
    fs.writeFile('./fragmentTypes.json', JSON.stringify(result.data), err => {
      if (err) {
        console.error('Error writing fragmentTypes file', err);
      } else {
        console.log('Fragment types successfully extracted!');
      }
    });
  });

这将生成一个带有__schema和适当类型的 json 文件。 完成此操作后，继续执行第 3 步。

2.3 - 选项 C - 自动本地方法

上面的选项对我来说很困难，因为我的架构在身份验证墙后面。 幸运的是，我确实可以直接在本地访问 .gql 文件，并且能够生成自省文件。 继续阅读：

我们使用graphql-code-generator为我们生成自省文件。

转到您的后端代码，或您的 graphql.gql 文件所在的任何位置，然后执行以下操作：

1. 安装GraphQL 代码生成器：

yarn add graphql

yarn add -D @graphql-codegen/cli

2. 运行初始化向导：

yarn graphql-codegen init

3. 填写详细信息（根据自己的情况调整）就我而言，我选择了：

• 后端 - API 或服务器，使用 React 构建的应用程序
• 你的架构在哪里？ ./appsync/appSync.gql
• 选择插件：片段匹配器（也可以随意选择其他插件......这是重要的！）
• 文档：./appsync/generated/introspection.ts（这是您希望输出文件的位置）

这将生成一个codegen.yml ，其中将包含要运行的graphql-code-generator的插件和配置。

这是我的：

overwrite: true
schema: "./appsync/appSync.gql"
# documents: "./appsync/**/*.gql"
generates:
  ./appsync/generated/introspection.ts:
    plugins:
      # - "typescript"
      # - "typescript-operations"
      # - "typescript-resolvers"
      # - "typescript-react-apollo"
      - "fragment-matcher"
    config:
    # NOTE: Remember to specify the CORRECT Apollo Client Version
      apolloClientVersion: 2.6
  ./graphql.schema.json:
    plugins:
      - "introspection"

我已经评论了对我们的使命不重要的部分。

然后（非常重要！）运行：

yarn install

因为向导将包添加到我们的package.json中。

然后，生成代码：

yarn generate

这将输出需要包含在 Apollo 中才能继续的 introspection.ts 文件。

3 - 将自省文件注入 ApolloClient

现在，在您的前端代码中，将introspection.ts文件复制到您的存储库（如果它还没有在其中），并包含它：

注意：我已将文件重命名为 fragmentTypes.ts 并将其包含在 apollo 文件夹中：

For V2:
import ApolloClient from 'apollo-client/ApolloClient';
import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
import { InMemoryCache } from 'apollo-cache-inmemory/lib/inMemoryCache';
// The file we just generated. If it's a .json file 
// remember to include the .json extension
import introspectionQueryResultData from './apollo/fragmentTypes';

const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData,
});

export const globalClient = new ApolloClient({
  link,
  cache: new InMemoryCache({ fragmentMatcher }),
});

For V3:
import { InMemoryCache, ApolloClient } from '@apollo/client';
// In case you used graphql-code-generator
// import introspectionQueryResultData from './apollo/fragmentTypes';
// The file we just generated. If it's a .json file 
// remember to include the .json extension
import possibleTypes from './path/to/possibleTypes.json';

const cache = new InMemoryCache({
  possibleTypes,
});
const client = new ApolloClient({
  // ...other arguments...
  cache,
});

在此之后，您的控制台警告应该消失，查询和突变应该正常执行。

Answer 2

可能有帮助的东西，你知道你在哪里调用 {data} 你也可以查找错误和 console.log('Error:',error)

检查阿波罗客户端查询文档

像这样的东西，看看错误信息，它应该有帮助！

import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';

const GET_GREETING = gql`
  query getGreeting($language: String!) {
    greeting(language: $language) {
      message
    }
  }
`;

function Hello() {
    const { loading, error, data } = useQuery(GET_GREETING, {
    variables: { language: 'english' },
  });
  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;
  return <h1>Hello {data.greeting.message}!</h1>;
}

Answer 3

这可能与您的情况无关，但我的情况是命名问题。

  const { isLoading, error, blogs } = useQuery(BLOGS);

从钩子返回的对象是data而不是blogs 。

Answer 4

当数据完全显示在操场上，但在实际应用程序中为空时，我遇到了类似的问题。 我检查了开发工具，看到所有数据都在浏览器的响应中，但它只是没有显示在 apollo 缓存中。 然后我发现原因是我将我的 apollo 客户端缓存选项设置为 {addTypename: false}。 删除后，它按预期工作。

Answer 5

这是一个迟到的答案，但我遇到了同样的问题，我的 playGround 返回了正确的响应，但没有 useQuery 钩子。

我的问题是提供给查询的变量（在您的情况下为“id”）是字符串类型而不是数字类型。

Answer 6

可能已经很晚了，但我的设置问题是我与 ApolloClient 配置相关的环境变量没有正确的名称。 所以apolloClient没有正确配置。 在 NextJS 中，如果你想向浏览器公开环境变量，那么环境变量的名称应该以NEXT_PUBLIC_ 。