标签: vue-apollo

有人可以帮我使用scaphold.io进行第一个查询吗？

当我使用内部GraphiQL查询以下内容时：

query AllPrograms {
  viewer {
    allPrograms{
      edges {
        node {
          id
          name
        }
      }
    }
  }
}

回报看起来像这样：

{
  "data": {
    "viewer": {
      "allPrograms": {
        "edges": [
          {
            "node": {
              "id": "UHJvZ3JhbTo2",
              "name": "Blender"
            }
          },
          {
            "node": {
              "id": "UHJvZ3JhbTo1",
              "name": "Inkscape"
            }
          },

          ...

我的组件看起来像这样：

<template>
  <md-card>
    <span class="md-headline">Programma's</span>
    <span class="md-headline">{{ allPrograms }}</span>
  </md-card>
</template>


<script>
import gql from 'graphql-tag'
import config from '../../config/client'

const log = console.log

const allPrograms = gql `
  query AllPrograms { …

我目前正在构建一个 Vue / Nuxt 应用程序，并结合修改后的 Saleor 安装来在线销售产品。

当我们从现有系统迁移时，我们需要能够处理从旧网站 URL 到新网站 URL 的 301 重定向。

我修改了 API 以响应以下 GraphQL 查询。

export const CHECK_REDIRECTS_QUERY = gql`
  query Redirect($oldPath: String) {
    redirect(oldPath: $oldPath) {
      oldPath
      newPath
    }
  }
`

根据此建议，我在 ~/serverMiddleware/redirect.js 文件中创建了以下代码

import { CHECK_REDIRECTS_QUERY } from '~/graphql/navigation/queries'

export default function(req, res, next) {
  console.log('redirects middleware')
  // context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
  this.$apollo
    .query({
      query: CHECK_REDIRECTS_QUERY,
      variables: {
        oldPath: '/test/11/old/'
      }
    })
    .then(({ data }) => {
      if (data.redirect.newUrl …

我想在 vuex 商店中存储来自登录操作的用户。但是没有访问权限this.$apollo。

export const actions = {
  UPSERT_USER({ commit }, { authUser, claims }) {
     this.$apollo
        .mutate({
          mutation: UPSERT_USER_MUTATION,
          variables: {
            id: user.uid,
            email: user.email,
            name: user.name,
            picture: user.picture,
          },
        })
    }

谢谢！

Vue-Apollo 3.04的发行说明指出现在有Apollo Client 3支持。由于该文档阿波罗客户端3声明ApolloClient， InMemoryCache，HttpLink，现在都在一个 @apollo/client封装-不像以前的单包。

https://github.com/vuejs/vue-apollo/releases/tag/v3.0.4

https://www.apollographql.com/docs/react/migrating/apollo-client-3-migration/

但是，Vue-Apollo ( apollo-client-> @apollo/client?)的文档中没有关于如何应用新更改的更改。另外， 阿波罗客户端3 Doc's指出，对于Vue公司，你必须导入ApolloClient从@apollo/client/core

所以我以自己的方式尝试过，但我的导入似乎失败了。我从npmm run serve. 看来他想进口一些react东西。

     ERROR  Failed to compile with 8 errors                                                                                                             20:25:20
This dependency was not found:

* react in ./node_modules/@apollo/client/react/context/ApolloConsumer.js, ./node_modules/@apollo/client/react/context/ApolloContext.js and 6 others

To install it, you can run: npm install --save react

vue-apollo.js（来自有效的旧项目）

import Vue from 'vue'
import { …

我一直在阅读一些内容，并提出了联系人输入字段的查询设置。我想避免在组件启动时使用空输入运行此查询。我也许可以通过计算方法手动运行查询，但是有没有一种简单的方法可以防止这种情况发生？

apollo: {
    search: { 
        query: () => contactSearchGQL,
        variables() { 
            return { 
                searchText: this.searchText, 
            };
        },
        debounce: 300,
        update(data) { 
            console.log("received data: " + JSON.stringify(data));
        },
        result({ data, loading, networkStatus }) {
            console.log("We got some result!")
        },
        error(error) {
            console.error('We\'ve got an error!', error)
        },
        prefetch() { 
            console.log("contact search, in prefetch");
            if ( this.searchText == null ) return false;
            return true;
        },
    },
},

我想我不了解预取，或者它是否适用于这里？

我是测试和 GraphQL 的新手。我正在尝试使用 vue-test-utils 和 jest 测试使用 GraphQL 的 VueJS 应用程序。我有一个组件，它从挂载的钩子中的 graphql 服务器获取类别。

mounted() {
  this.$apollo
    .query({
      query: getCategories
    })
    .then(res => {
      this.categoriesData[0].options = res.data.categories;
    });
}

在我的StepTwo.spec.js中，我将 Vue-apollo 添加到 vue 实例。

const Vue = createLocalVue();
Vue.use(VeeValidate);
Vue.use(BootstrapVue);
Vue.use(VueApollo);

test("Step Two ", async () => {
  const wrapper = shallowMount(StepTwo, { localVue: Vue });
});

当我尝试安装我的组件时，我得到了 TypeError: Cannot read property 'query' of undefined. 任何帮助，将不胜感激。

我正在尝试测试导入.gql文件的组件。当我尝试在 Jest 文件中构建组件时，我收到此错误：

( object. anonymous function(module exports require __dirname __filename global jest) {
query getUser {                                                
      ˆˆˆˆˆˆˆ
<script>
import GET_USER from 'PATH';
ˆ

有没有人知道如何忽略导入？因为我不需要测试 GraphQL 调用。

我正在使用 Nuxt 和Nuxt-Apollo创建我的 Vue 应用程序。我的文件中有以下 apollo 配置nuxt.config.js：

apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'http://localhost:8000/graphql/'
      },
      stage: {
        httpEndpoint: 'https://example-stage.com/graphql/'
      }
      prod: {
        httpEndpoint: 'https://example.com/graphql/'
      }
    }
  }

我如何指向stage或prod配置。每次我运行应用程序时，它都指向default配置。必须有我可以设置的地方。

我正在尝试将@vue/apollo-composable与我的 Nuxt-Ts 应用程序一起使用。这是如何将它注入到“普通”Vue 应用程序的根实例中的示例：

import { provide } from '@vue/composition-api'
import { DefaultApolloClient } from '@vue/apollo-composable'

const app = new Vue({
  setup () {
    provide(DefaultApolloClient, apolloClient)
  },

  render: h => h(App),
})

问题：我不知道如何访问Nuxt-TS 中的根实例。

我尝试制作一个插件，但它直接注入到根实例中（这是不对的，因为@vue/apollo-composable使用composition-api::provide()which 创建了它自己的属性_provided。

如果我使用 nuxt 插件，则会inject将$get 连接起来。如果我_provided直接写一个对象通过ctx.app._provided =它不会粘住。

import { DefaultApolloClient } from "@vue/apollo-composable";
const myPlugin: Plugin = (context, inject) => {
  const defaultClient = ctx.app.apolloProvider.defaultClient;
  inject(DefaultApolloClient.toString(), defaultClient) …

我的组件实例中有一个查询：

@Component({
  apollo: {
    cartProducts: {
      query: GET_CART_PRODUCTS,
      loadingKey: "loading",
    },
  }
})

它正在正确加载我的数据。然后我更改数据库中的数据并希望在单击时重新获取它们，这会调用该函数：

  refresh() {
    this.$apollo
      .query({
        query: GET_CART_PRODUCTS,
      })
      .then((res: any) => (this.cartProducts = res.data.cartProducts))
      .catch((err: any) => console.log(err));
  }

但它不会更新cartProducts属性，也不会给我任何错误。虽然如果我刷新页面，就会有新数据。在我的 Apollo 配置中，我有这样的属性fetchPolicy: "network-only"。这种行为的原因可能是什么？提前致谢！