标签: vue-apollo

我完全陷入了阿波罗问题,为此我打开了一个GitHub问题并且没有响应.

我正在使用阿波罗变种optimisticResponse.根据我的理解,它应该工作的方式是update()两次调用:首先使用乐观数据,然后再使用来自网络的实际数据.

但由于某种原因,我的代码不是这样的.我接到两个update()电话,都有乐观的数据.

这是一个演示此行为的回购:https://github.com/ffxsam/apollo-update-bug

1. 纱线&&纱线开发
2. 在浏览器中打开,打开控制台
3. 输入一些文字然后按Enter键
4. 重复以上
5. 请注意控制台中有关重复键的错误.发生这种情况是因为临时ID"??" 没有被真正的UUID替换(可选)您可以打开Vue DevTools(如果可用)并检查数据以查看它是否正确

我正在使用vue-apollo和构建 GraphQL 查询graphql-tag。

如果我对我想要的 ID 进行硬编码，它可以工作，但我想将当前路由 ID 作为变量传递给 Vue Apollo。

是否有效（硬编码 ID）：

  apollo: {
    Property: {
      query: PropertyQuery,
      loadingKey: 'loading',
      variables: {
        id: 'my-long-id-example'
      }
    }
  }

但是，我无法做到这一点：

不起作用（尝试访问 this.$route 以获取 ID）：

  apollo: {
    Property: {
      query: PropertyQuery,
      loadingKey: 'loading',
      variables: {
        id: this.$route.params.id
      }
    }
  }

我收到错误：

未捕获的类型错误：无法读取未定义的属性“参数”

有没有办法做到这一点？

编辑：完整的脚本块，以便更容易地看到发生了什么：

<script>
import gql from 'graphql-tag'

const PropertyQuery = gql`
  query Property($id: ID!) {
    Property(id: $id) {
      id
      slug
      title
      description
      price
      area …

我正在 Nuxt 中使用 Apollo 获取一些数据。不知何故，当导航到该页面时，我收到一个错误

Cannot read property 'image' of undefined

当我刷新页面时，一切都按预期工作。

我发现了一些有类似问题的人，但似乎没有解决方案对我有用：/

这是我现在的模板文件：

/产品/_slug.vue

<template>
  <section class="container">
    <div class="top">
      <img :src="product.image.url"/>
      <h1>{{ product.name }}</h1>
    </div>
  </section>
</template>

<script>
import gql from 'graphql-tag'

export default {
  apollo: {
    product: {
      query: gql`
        query Product($slug: String!) {
          product(filter: { slug: { eq: $slug } }) {
            slug
            name
            image {
              url
            }
          }
        }
      `,
      prefetch({ route }) {
        return {
          slug: route.params.slug
        }
      },
      variables() {
        return {
          slug: this.$route.params.slug …

我正在使用带有 apollo/client 的 vue 3 和composition api 。我按照文档做了所有事情，但这是我能做的。我提供了一个正确的后端网址，但无法弄清楚。这是我的代码，我在终端中收到警告

./node_modules/@vue/apollo-composable/dist/useQuery.js 中的警告

在浏览器控制台中我收到此错误。

Uncaught Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup.

 <template>
   <div class="hello">
     working with graphql
   </div>
 </template>
 <script>
  import { useQuery,DefaultApolloClient } from "@vue/apollo-composable"
  import { provide } from "vue" 
  import gql from "graphql-tag"
  import {ApolloClient,createHttpLink,InMemoryCache,} from "@apollo/client/core"
  const httpLink = createHttpLink({
    uri: "http://localhost:3000/graphql",
  })
  const cache = new InMemoryCache()
  const apolloClient = new ApolloClient({
    link: httpLink,
    cache,
  }) …

我正在使用Nuxt / Vue构建站点，并且使用了GraphQL后端API。我们使用Nuxt的Apollo模块来访问它。

在页面组件中，您可以执行此操作（我认为这称为智能查询，但我不确定）：

    apollo: {
        pages: {
            query: pagesQuery,
            update(data) {
                return _get(data, "pageBy", {})
            }
        },
    }

但是您也可以使用Nuxt asyncData挂钩执行类似的查询：

  asyncData (context) {
    let client = context.app.apolloProvider.defaultClient
    client.query({query, variables})
        .then(({ data }) => {
          // do what you want with data
        })
  }

我不确定这两种方式之间的区别是什么，哪个更好。有人知道吗？我在任何地方的文档中都找不到解释。

vue-apollo视图更改时是否自动取消订阅查询？

例如，我有两个视图路由到/users和/orders。/users已订阅该users表并/orders已订阅该orders表。

如果我在/user页面上，order订阅是否仍然有效？如果是，我将如何关闭它？

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

我正在验证用户是否存在，然后允许路线进一步进行。

{
        path: '/:username',
        name: 'userProfilePage',
        component: userProfilePage,
        beforeEnter(routeTo, routeFrom, next) {
            userExist(routeTo.params.username)
            next()
        }

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

import gql from "graphql-tag"

export default function userExist(username) {
    this.$apollo
        .query({
            query: gql`
        query($username: String!) {
            login(username: $username) {
                username
                email
            }
        }
    `,
            variables: {
                username: username
            }
        })
        .then(res => {
            console.log(res);
            return res
        })
        .catch(err => {
            console.log(err);
            return err
        });
}

但它输出错误：

阿波罗客户端代码

import Vue from 'vue'
import App from './App.vue'
import …

我对 WebStorm 语法突出显示有问题。我创建了有效的 GraphQL 查询，它适用于 localhost 应用程序，但 WebStorm 说

对象类型“查询”上的未知字段“familyMembers”

并以红色突出显示整个查询。

我真的很困惑，但也许我应该在里面改变一些东西apollo.config.js- 如果是，请告诉我什么。

HelloWorld.vue

<script>
import gql from 'graphql-tag';
export default {
  apollo: {
    familyMembers: gql `
    query familyMembers {
        familyMembers {
            id
            firstName
            lastName
        }
    }`
  },
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

apollo.config.js

module.exports = {
    client: {
        service: {
            name: 'vav',
            // URL to the GraphQL API
            url: 'http://localhost:4000',
        },
        // Files processed by the extension
        includes: [
            'src/**/*.vue',
            'src/**/*.js',
        ],
    }, …

枚举定义在 OrderTypesEnum.gql

enum OrderTypes {
  full_buy
  pink_buy
}

导入 OrderTypesEnum.gql 文件

import OrderTypes from '@/graphql/OrderTypesEnum.gql'`

但是，如何在代码中获取枚举？

我使用OrderTypes.full_buy 得到一些错误：

   self.$apollo.mutate({
        mutation: createOrder,
        variables: {
          subjectId: self.subject.id,
          types: OrderTypes.full_buy
        }
      })

Mutation createOrderMutation error: Invariant Violation: Schema type definitions not allowed in queries. Found: "EnumTypeDefinition"

OrderTypes 类型枚举的检查

我正在研究 graphQL 和 spring boot 项目。该 API 使用 graphiQL 运行良好，但当尝试使用 Apollo vueJS 使用它时，会导致 CORS 起源错误。

我在 ProductQuery 类中使​​用 @CrossOrigin 注释，该类实现 GraphQLQueryResolver ，如下所示：

 @CrossOrigin(origins = "https://localhost:8081")
public List<Product> getProducts(){return this.productService.findAll(); } 

这是前端项目上显示的错误：

我感谢您的帮助。