问题标签 [graphql-tag]

我正在构建一个简单的 React Native 应用程序。测试 AppSync API。我能够进行查询、突变；但订阅似乎不起作用。我正在 Android 模拟器上尝试这个。

以下是我构建客户端和创建订阅的方式。

这是我的架构（相关部分）和订阅 gql（由 codeGen 自动生成）

架构

订阅 gql

注意：我已经验证订阅在 AWS 控制台中触发突变时工作正常，但我在 ReactNative 应用程序中看不到任何错误。

按照一些教程和示例，我将 GraphQL API 集成到一个简单的 Vue 应用程序中。我正在使用 Apollo 与 API 和 graphql-tag 提供的模板文字进行交互来编写查询，如下所示：

但是，我不太了解 graphql-tag 包的必要性。据我了解，这个包将查询转换为 AST，但是在前端这样做的目的是什么，为什么需要 graphql-tag 包来做到这一点？GraphQL 查询不能按原样发送到服务器吗？

我正在使用apollo-server-expressprisma 数据库运行我的 GraphQL 服务器。下面列出了我的主要架构，它仅用于graphql-tag/loader导入其他.graphql文件。当我尝试在本地运行我的服务器时，我收到以下消息：

错误：模块构建失败（来自 ./node_modules/graphql-tag/loader.js）：GraphQLError：语法错误：意外

显然，GraphQL 想要schema/schema.graphql声明一些类型等。有没有办法解决这个问题，以便我可以拥有一个.graphql文件，它所做的只是导入其他.graphql文件？

架构/schema.graphql：

index.js：

.gql我为我的查询创建了一个文件，并像这样导入它：

但是，如果我将query变量记录到控制台，它会显示一个对象，而不是字符串。我该怎么做才能让我导入的查询只是一个字符串？

下面给出的是获取产品列表并将其存储在 apollo-client 本地缓存中的查询。它检索每个产品products的列表和列表images

返回的数据用于呈现用户可以选择任意数量产品的 UI。我正在使用以下突变将产品标记为选中

上述突变工作正常，并且selected标志出现在product缓存中的相应位置。现在我有一个要求，当一个产品被选中时，它的第一张图片也应该被标记为选中，而不需要用户进行任何手动操作。在这种情况下，我没有图像的 ID。我只知道无论所选产品的第一张图片是什么，都应该将其标记为已选中。我怎样才能实现这一目标？如果我有 id，我想我将能够在 Image 对象上创建一个片段并对其进行变异。

我需要帮助找出与 Apollo Client 一起使用的 GraphQL 标签。文档并没有超出最基本的突变用例。

我的目标是让唯一需要的输入是电子邮件。如果存在其他变量，我希望这些变量被接受并创建一个包含所有这些信息的提案。

我有突变（仅在电子邮件和完整变量场景中）在 GraphQl Playground 上成功运行（如果有帮助，您可以在此处找到并对其进行测试，查看架构等）：https://prisma2 -graphql-yoga-shield.now.sh/playground）

结果产生：

我对 gql 标签的初始设计：

但是，我对此有很多错误。

那么，我该怎么做...我想出了查询版本（容易得多...），但我就是想不通！

我的架构，如果有帮助的话：

我正在使用 vue-apollo + vue-property-decorator。我可以像这样很好地运行查询：

但是，如果我尝试使用组件的属性进行查询，例如来自文件

然后我得到错误：

如果我像上面的示例那样从另一个文件导入 MYQUERY ，或者它是本地组件的属性，则同样的错误并不重要。我可以将鼠标悬停在 MYQUERY 上并得到一个 TypeScript 提示，它是一个 DocumentNode，但无论我做什么，如果不将完整的模板文字放入实际get apollo ()函数中，我都无法让它工作。

我是 Graphql 和 React 的新手。我需要帮助。我尝试从像 GraphiQL 这样的用户那里获取查询。我想从用户那里获取查询并返回结果。我做了一个查询。如果我写查询，它可以工作，但否则我会出错。我的代码块如下所示并且有效：

我的代码块喜欢并且可以工作：

我尝试像这样从用户那里获取查询但不起作用：

也许我想我会做接近那个的事情。

我有一个组件，它通过 webpack 的 graphql-tag/loader 从 graphql 文件导入查询。

我现在尝试为所有可能的查询和突变声明一个通用类型：

打字稿编译器无法识别我的导入。我知道我的打字定义有问题，但在这种情况下我似乎找不到对我有帮助的文档。

有什么建议么？

我正在使用graphql-codegen从 graphql 模式生成打字稿类型。我正在尝试创建一个带有动态字段的片段。

架构.ts

这是由 生成的类型graphql-codegen。

用户模型.ts

我在整个应用程序中使用这些接口进行验证和一致性。

show.ts

这是用于生成的文件。在这里，我想使用我的existentIUserPost和IUserProfile接口制作一个带有动态字段的片段，以便重用这些字段并避免在片段中一一重复它们。

当我尝试使用插值传递这些字段时，出现此错误：

发现 1 个错误

× C:/Development/GogoFans/gogofans-ui/src/app/users/graphql/fragments/show.ts
GraphQLError: Syntax Error: Expected Name, found "}"。

在 Parser.expectToken (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\ language \ 的 syntaxError (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\error\syntaxError.js:15:10) parser.js:1423:40)
在 Parser.parseName (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:92:22)
在 Parser.parseField (C:\Development\GogoFans\ gogofans-ui\node_modules\graphql\language\parser.js:289:28)
在 Parser.parseSelection (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:278:81)
在 Parser .many (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:1537:26)
在 Parser.parseSelectionSet (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\ parser.js:265:24)
在 Parser.parseFragmentDefinition (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:410:26)
在 Parser.parseDefinition (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\语言\parser.js:134:23)
在 Parser.many (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:1537:26)
在 Parser.parseDocument (C:\Development\ GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:109:25)
在 Object.parse (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:36:17)
在 Object.parseGraphQLSDL (C:\Development\GogoFans\gogofans-ui\node_modules@graphql-tools\utils\index.cjs.js:601:28)
在 parseSDL (C:\Development\GogoFans\gogofans-ui\node_modules@graphql-tools\code-file-loader\index.cjs.js:239:18)
在 CodeFileLoader.load (C:\Development\GogoFans\gogofans- ui\node_modules@graphql-tools\code-file-loader\index.cjs.js:173:28)
在异步 loadFile (C:\Development\GogoFans\gogofans-ui\node_modules@graphql-tools\load\index.cjs .js:48:24)

GraphQLError：语法错误：预期名称，找到“}”。

在 Parser.expectToken (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\ language \ 的 syntaxError (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\error\syntaxError.js:15:10) parser.js:1423:40)
在 Parser.parseName (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:92:22)
在 Parser.parseField (C:\Development\GogoFans\ gogofans-ui\node_modules\graphql\language\parser.js:289:28)
在 Parser.parseSelection (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:278:81)
在 Parser .many (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:1537:26)
在 Parser.parseSelectionSet (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\ parser.js:265:24)
在 Parser.parseFragmentDefinition (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:410:26)
在 Parser.parseDefinition (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\语言\parser.js:134:23)
在 Parser.many (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:1537:26)
在 Parser.parseDocument (C:\Development\ GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:109:25)
在 Object.parse (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:36:17)
在 Object.parseGraphQLSDL (C:\Development\GogoFans\gogofans-ui\node_modules@graphql-tools\utils\index.cjs.js:601:28)
在 parseSDL (C:\Development\GogoFans\gogofans-ui\node_modules@graphql-tools\code-file-loader\index.cjs.js:239:18)
在 CodeFileLoader.load (C:\Development\GogoFans\gogofans- ui\node_modules@graphql-tools\code-file-loader\index.cjs.js:173:28)
在异步 loadFile (C:\Development\GogoFans\gogofans-ui\node_modules@graphql-tools\load\index.cjs .js:48:24)

出问题了

npm 错误！代码 ELIFECYCLE
npm 错误！errno 1
npm 错误！gogofans-ui@0.0.0 生成：graphql-codegen --config codegen.yml
npm ERR！退出状态 1
npm ERR！
npm 错误！gogofans-ui@0.0.0 生成脚本失败。
npm 错误！这可能不是 npm 的问题。上面可能有额外的日志输出。

npm 错误！可以在以下位置找到此运行的完整日志：
npm ERR！C:\Users\Fidel\AppData\Roaming\npm-cache_logs\2020-07-06T07_01_25_424Z-debug.log