如何使用自定义类型创建 apollo 客户端查询答案

【问题标题】：how to create apollo client query with custom types如何使用自定义类型创建 apollo 客户端查询
【发布时间】：2021-04-02 02:58:36
【问题描述】：

我必须进行查询，并且必须传递一个嵌套变量。以下是我使用 apollo graphql 客户端界面时的工作查询。它给了我预期的结果。以下是工作查询

query($input: MyProductInput!){
  MyProductCategories(input: $input){
    id,
    name
  }
}

我要传递的变量

{
  "input": {
    "locale": "ENG"
  }
}

MyProductInput 类型在 SERVER 上看起来像这样

type MyProductInput {
  locale: Locale!
}
enum Locale {
  IND
  AUS
  ENG
}

当我尝试从我的 React 应用程序调用相同的查询时，它给了我错误，它说 400 bad request。我的 React 查询如下所示。

const PRODUCT_LIST = gql`
  query ($locale: String!) {
    MyProductCategories(input: {locale: $locale}){
      id,
      name
    }
  }
`;

const { loading, error, data } = useQuery(PRODUCT_LIST, {
  variables: {
    "input": {
      "locale": "ENG"
    }
  },
});

如何转换我的反应查询以适应自定义类型？

注意：我在前端使用的是 JavaScipt 而不是 Typescript

【问题讨论】：

你签入graphiql了吗？
Nisharg shah，是的，我签入了 graphiql，我在its working fine in apollo graphql client interface 的问题中也提到了这一点
请去掉id, name之间的逗号

标签： javascript reactjs graphql react-apollo

【解决方案1】：

查看文档：

https://www.apollographql.com/docs/react/api/react/hooks/

您能否查看有关您返回的错误消息的更多信息？

【讨论】：

这没有帮助。在将其发布到此处之前，我已经浏览了 apollo doc 和相关的 stack-overlow。
你能在控制台找到一些详细的错误信息吗？或者在 devtools 的网络选项卡上？通常，您可以看到 post 或 get 请求以及一些带有详细信息的错误消息从 GraphQL 服务器返回
GRAPHQL_VALIDATION_FAILED，无法在“查询”类型上查询字段“MyProductCategories”。然而，同样的查询正在 chrome 的 apollo 客户端上运行。这里的问题是如何在查询中传递自定义类型，即type MyProductInput {locale: Locale!}

【解决方案2】：

我得到了答案。我只需要在查询中执行此$input: MyProductInput! 并将$input 传递给MyProductCategories。下面是工作示例。

const PRODUCT_LIST = gql`
  query ($input: MyProductInput!) {
    MyProductCategories(input: $input){
      id,
      name
    }
  }
`;

使用钩子响应查询

const { loading, error, data } = useQuery(PRODUCT_LIST, {
  variables: {
    "input": {
      "locale": "ENG"
    }
  },
});

无需担心自定义类型，因为它已经存在于服务器中。照原样传递并设置变量

【讨论】：