问题标签 [vue-apollo]

我将 vue-apollo 与 AWSAppSyncClient 一起使用。我已经关注了 Vue 的这个文档 - https://github.com/awslabs/aws-mobile-appsync-sdk-js。我的要求是用户应该能够订阅 appsync。这是 main.js 代码。

用户使用 aws cognito 验证成功登录后，我得到了“凭据”部分。

上述设置工作正常。用户可以登录。在 cognito 验证用户后，它会发送临时凭证（访问密钥、密钥、会话令牌）。使用临时凭据，我可以通过 vue-apollo 订阅 aws appsync。但是，凭证的有效期仅为 1 小时。所以我需要更新凭据并保留订阅部分以获取实时数据。但我不知道该怎么做。我浏览了文档，但找不到任何特定于我的案例的内容。

我需要从“vm”的子组件或 vuex 商店更新凭据。我已经更新了凭据。我只是不知道如何将其传递给“AWSAppSyncClient”以及如何使用更新的凭证重新订阅。我也不想重新加载页面。它应该在不重新加载页面的情况下更新凭据。希望以前有人会这样做吗？

我有一个 Vue 组件，其中包含通过 Apollo 从数据库填充的项目列表：

当响应通过 Apollo 到达时，所有三个 DeviceInfo组件都会同时使用相同的数据进行更新。最后，他们都得到了数据库的最后回应。我希望查询只更新它自己的组件。

有什么建议为什么要共享数据？

我知道的：

1. 数据库响应是正确的，并且包含正确 camId 的数据，就apollo/data/updated函数而言。
2. Vue 浏览器开发工具为所有DeviceInfo兄弟显示相同的数据对象。
3. 我得到与v-for相同的行为

下面是DeviceInfo组件的完整代码：

这可能是一个奇怪的问题，但我无法从尝试将表单发布到我的本地 URL/端点的托管网站连接到本地运行的应用程序。我敢肯定，我缺少一些简单的东西——或者只是缺乏知识——但任何帮助都将不胜感激。

它的工作方式是这样的：

• 我有一个 Vue Apollo 应用程序在https://localhost:8080上运行，graphql 服务器在http://localhost:4000/graphql上运行。当然，这仅用于开发/测试目的。最终，它将被托管。

• 在由其他人托管的第三方应用程序中，他们有一个启动服务，它将以模式（如插件）启动我的应用程序。该启动发布了一些表单数据，我将使用这些数据来使用各种用户信息进行身份验证等。

每当他们尝试 POST（或我尝试通过 Postman）到我的 localhost:8080 客户端时，它都会以 404 终止。我可以在服务器上很好地 POST 到 localhost:4000/graphql 端点。所以，我想我的问题是这样的：

1. 有没有办法在客户端接收 POST 请求到 vue-router 端点？我的谷歌搜索运气不佳。
2. 如果我改为 POST 到 graphql 服务器，则需要通过 https（第三方主机环境的要求）。我还没有找到关于如何让 graphql 服务器通过 https 服务的明确答案。然后如何创建一个自定义端点来接收 POST？我是使用 express 中间件，还是有更标准的方法？

这是我的 vue-apollo.js：

无论我将 httpEndpoint 设置为什么，它仍然会在http://localhost:4000/graphql处启动服务器。我能找到的对该 URL 的唯一其他引用是在 grapqhlconfig.yml 中，我也在那里更改了它，但无济于事。我一定遗漏了一些东西——一种覆盖的方法，也许是我在文档或谷歌搜索中找不到的。

就让我的本地应用程序接收来自远程网站的 POST 调用而言，是否有一个最佳实践，即使是在一般情况下，我也错过了？

我应该补充一点，我正在使用 Vue CLI 3 脚手架和 vue-apollo 默认设置的相当默认设置。

这是我的 vue.config.js：

非常感谢您的帮助。

在使用 vue-apollo 的 fetchMore 后，我正在尝试使用 vue-tables-2 库的 setPage 方法，但问题是当查询得到新结果时，表仍然在第一页

Vue-tables-2

我正在尝试订阅delete,create和update突变的更改。

在我的 GraphQL 模式中，我创建了一个订阅字段，用于监听所有这些突变type Subscription { onAll: Task @aws_subscribe(mutations: ["createTask","updateTask","deleteTask"]) }

现在，当尝试使用 amplify-vue 组件时，如果收到回复，:onSubscriptionMsg=SomeFunction(response)我会收到来自response.data.listOfTasks.

那么我应该如何知道引发了哪个突变并因此更新data.listOfTasks?

提前感谢您回答这个问题:)

我知道我可能在这里遗漏了一些非常基本的东西，我正在尝试使用 vue-apollo 运行 graphql 查询......如果我使用标签，它工作正常

如果我尝试从我的代码中运行查询，就像文档中的基本示例（下面的链接）一样，那么什么也不会发生。服务器从不接收任何请求，并且 this.$apollo.queries 为空。）

文档中的基本示例：

• https://akryum.github.io/vue-apollo/guide/apollo/#queries
• https://vue-apollo.netlify.com/guide/apollo/queries.html#simple-query

我已经在“apollo”属性/对象中定义了查询......当页面加载时我如何实际执行它？请注意，我使用的是打字稿，这就是它使用“ get apollo()”方法的原因。

这是我的代码...

请注意，模板中的 this.$apollo.queries 是空的，可能是一个线索……但仍然不知道为什么它是空的。从我看到的文档和示例中，它应该从我的get apollo数据方法中填充。

据我所知，看起来与https://github.com/OniVe/vue-apollo-typescript-example/blob/master/pages/index.vue基本相同，我不知道有什么区别。

我已经尝试从头开始多次重建项目（有和没有 nuxt），在几个月的过程中以及 vue/nuxt/apollo/vue-apollo 的许多不同版本......查询永远不会运行（从内存中）除非我使用标签。

我错过了什么？

https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-mutation-options-optimisticResponse

有很多文档和教程显示了突变的使用update和optimisticResponse涉及添加内容的属性，但我没有看到任何涉及删除的内容。

我不确定该代码的外观。通过创建突变，您希望通过 将新项目添加到 Apollo 缓存中，update并使用optimisticResponse. 但是对于删除，“显示”删除是没有意义的，因为它没有数据。

这是我在 Vue 组件中的一个方法中得到的，部分正确：

我发现我基本上需要从 Apollo 缓存中删除已删除的项目，这部分似乎工作得很好。虽然视觉移除不会立即发生，因为没有optimisticResponse. 那是我完全不知道如何写作的部分。

我的问题的快速总结

我有一个getTracks查询，它将获取跟踪数据，并采用一些参数进行排序/过滤（限制、偏移、搜索、排序、顺序）。不幸的是，Apollo 会单独缓存所有这些，因此当一个项目在一个视图中被删除时，用户会更改排序顺序并且被删除的项目仍然存在（因为它在缓存中用于不同的参数集）。

细节

这是getTracks查询以及相关输入类型（在我的服务器端 AppSync 架构中）：

在 Vue 客户端中，查询如下所示：

第一次显示表格时，项目加载并显示正常（默认排序顺序为 createdAt/desc）。如果我按 createdAt/asc 排序，则会发出网络请求来获取结果，并且它们显示得很好。现在，如果我删除其中一条记录，然后再次按 createdAt/desc 排序，则会显示已删除的项目，因为它是从缓存中提取的。

即使查询有不同的参数，Apollo 有没有办法让它智能地从缓存中删除（或添加/修改）项目？我确实尝试了此处记录@connection的指令，但它只是使它对表进行排序没有效果（它根本不会从服务器获取）。

我完全被卡住了，准备完全禁用缓存，因为它似乎在现实世界的场景中不起作用。如何保持默认cache-and-network策略，但在数据更改时让我的表正常运行？

如何使 apollo 在 vue 组件之外访问。

我正在验证用户是否存在，然后允许路由继续进行。

username将作为参数传递给userExist函数。

但它正在输出错误：

阿波罗客户端代码

我似乎无法将使用 apollo 进行的 graphql 查询中的变量放入查询正文中以被后端服务器接受。

我有一个简单的 vue 前端和后端。在一个 vue 组件中，我有以下查询：

在我的后端，我为所有 POST 请求提供了处理函数

当我运行查询时，我返回 {"entries" : null}。当我打印出发送到我的 go 服务器的查询时，我得到以下信息：

在第 2 行中，我希望看到条目（用户 ID：2）。事实上，如果我从 vue 中的查询中删除变量，并在查询中硬编码用户 ID，一切正常。

我检查以确保以某种方式发送变量，如果我查看 POST 请求，它的参数中包含以下内容：

我是否没有在后端正确接受数据，因为变量 userID 是在 POST 请求中发送的？

解决方案：感谢@cgcgbcbc 的解决方案。我的reqBody结构如下：

什么时候应该：

然后我只需要像他的解决方案一样传递rBody.Variables给我的ExecuteQuery函数。