td;dr 如何在已经使用 TypeScript 的项目中包含 vue-apollo？

我使用 vue cli@3 和 TS 创建了一个新的 vue 项目。

然后我添加了vue-apollo修改我的 main.ts 文件的插件来添加

apolloProvider: createProvider(),

在 vue 实例创建中。

但是编译器对此有所抱怨。

'{ router: VueRouter; 类型的参数 商店：商店<{}>；apolloProvider: { 提供: () => {}; }; 渲染：（h：CreateElement）=> VNode；}' 不能分配给类型为 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record>' 的参数。

对象字面量只能指定已知的属性，并且在类型 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record>' 中不存在 'apolloProvider'。[2345]

我可以看到我从 npm 获取的 vue-apollo 包中有一个 types 目录，但不确定如何使用它们。

我也得到以下

[ts] 找不到模块“@/vue-apollo”的声明文件。'/Users/praveen/code/voicezen/repos/voicezen-ui/src/vue-apollo.js' 隐式具有 'any' 类型。[7016]

对于 main.ts 中的以下导入

import { createProvider } from '@/vue-apollo';

我知道这可能来自noImplicitAny规则，但是将生成的vue-apollo.js 更改为 …

我正在尝试禁用Apollo 上的缓存，因此我正在关注文档apollo-client ，但我无法成功，我一直收到此警告 ApolloBoost was initialized with unsupported options: defaultOptions

有没有人有同样的警告？

import Vue from 'vue'
import ApolloClient from 'apollo-boost'

    const defaultOptions = {
      watchQuery: {
        fetchPolicy: 'network-only',
        errorPolicy: 'ignore'
      },
      query: {
        fetchPolicy: 'network-only',
        errorPolicy: 'all'
      }
    }

    const client = new ApolloClient({

    defaultOptions: defaultOptions,
    )};

我将 Vue.js 与 Vue-Apollo 一起使用，并尝试使用查询获取共享成员列表。我在后端使用 graphQL 服务。

我正在使用 apollo 'error' 函数来处理 GraphQL 错误。当使用无效输入发出请求时，我可以在网络选项卡中看到错误，我可以看到自定义错误消息的 JSON。但我无法控制 'error' 函数中的错误。

这是用于获取共享成员列表的 apollo 查询 -

apollo: {
    sharedMembers: {
      query: gql`
        query item($uuid: ID) {
          item(uuid: $uuid) {
            ...itemTemplate
            members {
              ...member
              permission
            }
          }
        }
        ${ITEM_TEMPLATE}
        ${MEMBER}
      `,
      variables() {
        return {
          uuid: this.$route.params.uuid,
        }
      },
      update(data) {
        return data.item.members
      },
      error(error) {
       console.log('errors', error)
      }
    },
  },

我得到的网络响应 -

网络错误

我正在尝试使用 jest 运行单元测试，但出现以下错误：

  \xe2\x97\x8f Test suite failed to run\n\n/apollo/queries/articles.gql:1\n({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){query articles($orderBy: [OrderByClause!], $stripTags: Boolean, $maxCharacters: Int) {\n                                                                                               ^^^^^^^^\n\nSyntaxError: Unexpected identifier\n

我已经安装了

\n

https://github.com/jagi/jest-transform-graphql

\n

它应该转换 GQL 文件。

我的 package.json （玩笑部分）

"jest": {\n    "moduleFileExtensions": [\n        "js",\n        "json",\n        "vue",\n        "gql"\n    ],\n    "watchman": false,\n    "moduleNameMapper": {\n        "^~/(.*)$": "<rootDir>/$1",\n        "^~~/(.*)$": "<rootDir>/$1"\n    },\n    "transform": {\n        "^.+\\\\.js$": "<rootDir>/node_modules/babel-jest",\n        ".*\\\\.(vue)$": "<rootDir>/node_modules/vue-jest",\n        "\\\\.(gql|graphql)$": "@jagi/jest-transform-graphql"\n    },\n    "snapshotSerializers": [\n        "<rootDir>/node_modules/jest-serializer-vue"\n    ],\n    "collectCoverage": true,\n    "collectCoverageFrom": [\n        "<rootDir>/components/**/*.vue",\n        "<rootDir>/pages/*.vue"\n    ]\n}\n

测试文件

import Index from "../index";\n\nconst …

我想手动编辑缓存中的一些数据。

如何直接从 Vue 组件的方法readQuery()和writeQuery()vue-apollo 中？我正在寻找类似的东西this.$apollo.readQuery(...)，但它不起作用。我store从哪里获取实例？

我的意思是来自update()eg 中方法的 store 实例this.$apollo.mutate。

如何更新 apolloProvider 的标头？

请查看 nativescript-vue 应用程序存储库：

https://github.com/kaanguru/vue-apollo-login

我无法正确解释，所以请查看该应用程序。我不知道如何更新 appolloClient 标头。

应用程序存储库有自己的注释和指令。您可以轻松安装和查看。

当前代码结构：

Post 请求提交用户的标识符和密码凭据进行身份验证，并在登录页面获取令牌。

Apollo 需要将 jwt 令牌放入 Authorization 标头中。

• Main.js：如果有 JWT 以标头开头，则启动 apollo 客户端

  • 如果没有 JWT 则转到登录

  • 如果有智威汤逊，请转到鸟类列表

• 登录：从服务器获取jwt并将其写入本地存储

  • 转到鸟类列表（不显示数据，因为 apollo 在主 js 中初始化）

import ApolloClient from 'apollo-boost'
import VueApollo from 'vue-apollo'

Vue.use(VueApollo)

const apolloClient = new ApolloClient({
  uri: 'http://sebapi.com/graphql',

// HEADERS WORK FINE IF TOKEN WAS IN MAIN
//   headers: {
//     authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNTg2MzU2NzM2LCJleHAiOjE1ODg5NDg3MzZ9.wpyhPTWuqxrDgezDXJqIOaAIaocpM8Ehd3BhQUWKK5Q`,
// }

})
const apolloProvider = new VueApollo({
  defaultClient: …

创建新数据后如何更新缓存？

来自阿波罗的错误信息

存储错误：应用程序试图写入一个没有提供 id 的对象，但存储已经包含了该对象的 UsersPermissionsUser:1 的 id。试图写入的 selectionSet 是：

{
  "kind": "Field",
  "name": { "kind": "Name", "value": "user" },
  "arguments": [],
  "directives": [],
  "selectionSet": {
    "kind": "SelectionSet",
    "selections": [
      { "kind": "Field", "name": { "kind": "Name", "value": "username" }, "arguments": [], "directives": [] },

      { "kind": "Field", "name": { "kind": "Name", "value": "__typename" } }
    ]
  }
}

Nativescript-vue 前端详解

1-在 YouTube 上运行的Watch Book Mobile 应用程序：https : //youtu.be/sBM-ErjXWuw

2-在 YouTube 上观看问题视频了解详情：https : …

我的 Apollo 缓存中有一个 NuxtJS 应用程序，其中包含深度嵌套的数据。作为一个例子，我的缓存可能看起来像这样，其中旅行有许多类别，其中有许多项目。

ROOT_QUERY
  trips: [Trip]
    0: Trip:1
      categories: [Category]
        0: Category:1
          items: [Item]
            0: Item:1
            1: Item:2
            2: Item:3  
    1: Trip:2

我正在尝试在删除或添加项目到位于 的项目数组中后更新缓存trips[0].categories[0]。我所拥有的功能有效，但只有在与我的服务器通信并返回响应时似乎有 1-2 秒的延迟之后。在我看来，optimisticResponse要么无法正常工作，要么数据嵌套太深，无法足够快地更新 UI。

这是我的removeItem函数的样子：

import { remove } from 'lodash';

async function removeItem ({ fields, trip_id, apollo }) {
  return await apollo.mutate({
    mutation: removeItemMutation,
    variables: fields,
    optimisticResponse: {
      __typename: 'Mutation',
      removeItem: {
        __typename: 'item',
        id: fields.item_id,
        name: '',
        weight: 0,
        unit: '',
        price: 0,
        category_id: fields.category_id,
        quantity: 0, …

我目前面临着一个无法重现的错误。

1. 我的前端错误记录器是Bugsnag，前端使用Vue.js / vue router / vue apollo Graphql
2. 有时我会在 Bugsnag 中弹出这样的错误：unhandledrejection handler received a non-error。这样：没有文件，没有堆栈跟踪。
3. 出现此错误的用户操作是从一个页面转到另一页面时，每次都是相同的起点和目的地，但我无法在本地或生产中重现。我不知道用户是否被阻止或者错误是否对他来说是无声的
4. 我尝试使用https://github.com/grantila/trace-unhandled来记录更多信息，但我得到的唯一信息是：

UnhandledPromiseRejectionWarning
[ Stacktrace altered by https://github.com/grantila/trace-unhandled ]
Unknown error
    ==== Promise at: ==================


    ==== Error at: ====================


    ==== Shared trace: ================

但是，当创建我自己的未处理的拒绝承诺时，我可以得到类似的东西：

UnhandledPromiseRejectionWarning
[ Stacktrace altered by https://github.com/grantila/trace-unhandled ]
Unknown error
    ==== Promise at: ==================
    at eval (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vuetify-loader/lib/loader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/pages/Customer/CurrentCases.vue?vue&type=script&lang=js&:127:9)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vuetify-loader/lib/loader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/pages/Customer/CurrentCases.vue?vue&type=script&lang=js& (http://....../js/23.js:23:1)
    at __webpack_require__ (http://....../js/app.js:790:30)
    at fn (http://....../js/app.js:151:20)
    at eval (webpack-internal:///./src/components/pages/Customer/CurrentCases.vue?vue&type=script&lang=js&:2:339)
    at Module../src/components/pages/Customer/CurrentCases.vue?vue&type=script&lang=js& (http://....../js/23.js:107:1)
    at __webpack_require__ (http://....../js/app.js:790:30)
    at fn …

我正在尝试对我的 SPA 实施 JWT 身份验证，登录和注销已完成，但我无法找出实施刷新令牌的正确（或只是工作）方法，任何帮助将不胜感激！

我找不到任何有关通过 Vue Appollo 处理刷新令牌的教程。有“ Vue CLI Apollo 插件”

createApolloClient({
  ...
  // Custom pre-auth links
  // Useful if you want, for example, to set a custom middleware for refreshing an access token.
  preAuthLinks: [],
  ...})

但没有关于实现它的示例，并且看起来“Vue CLI Apollo 插件”已被弃用，它长时间更新并且无法与 VUE CLI 4 一起使用。

当前的前端堆栈是：

Vue-cli 4.5,
Apollo/client 3.5.8
Vue-apollo-option 4.0.0
Graphql 16.3.0
Vuex 4.0

我的 vue-apollo.js 配置：

import { createApolloProvider } from "@vue/apollo-option";
import { AUTH_TOKEN } from "@/constants/settings";

import {
  ApolloClient,
  createHttpLink,
  InMemoryCache,
  ApolloLink, …