标签: vue-apollo

我做了这个样本:https://github.com/Akryum/vueconf-2017-demo

因此,我的项目中有相同的文件:https://github.com/Akryum/vueconf-2017-demo/blob/master/src/apollo-client.js

这是我的应用程序中使用的代码:

import { ApolloClient, createNetworkInterface } from 'apollo-client'

const apolloClient = new ApolloClient({
  networkInterface: createNetworkInterface({
    uri: 'http://localhost:3000/graphql',
    transportBatching: true,
  }),
  connectToDevTools: true,
})

export default apolloClient

结果,我得到控制台的错误(警告):

warning  in ./src/apollo/client.js

15:23-45 "export 'createNetworkInterface' was not found in 'apollo-client'

这是来自浏览器控制台:

TypeError: Object(__WEBPACK_IMPORTED_MODULE_0_apollo_client__["createNetworkInterface"]) is not a function. (In 'Object(__WEBPACK_IMPORTED_MODULE_0_apollo_client__["createNetworkInterface"])({
    uri: 'http://localhost:3000/graphql',
    transportBatching: true
  })', 'Object(__WEBPACK_IMPORTED_MODULE_0_apollo_client__["createNetworkInterface"])' is an instance of Object)

问题是什么？

我有一个用户可以注册活动的应用程序。用户注册后，便可以访问以前无法访问的路线。

我正在对我的api请求使用graphql。我的路由守卫中的代码如下所示：

router.beforeEach(async (to, from, next) => {
  if (to.meta.signUpRequired && from.name) {
    const { data: { getCurrentUser } } 
      = await apolloProvider.defaultClient.query({
      query: USER_INFO_QUERY
    });
    if (getCurrentUser && getCurrentUser.isCollectionAttendee) {
      return next();
    }
    return next('/');
  }
  return next();
});

这样工作良好，并且每次路由更改时都不会执行请求，因为vue-apollo会缓存结果。我的问题是，如果用户注册并尝试切换路由，则不能这样做，因为仍然使用查询的缓存结果。

我不想在每次更改路由之前都使用仅网络的fetchPolicy。

我该如何解决？

我知道我可能在这里错过了一些非常基础的东西，我正在尝试使用vue-apollo运行graphql查询...如果我使用标签，那么效果很好

如果我尝试从代码内部运行查询，例如docs中的基本示例（下面的链接），则什么都不会发生。服务器从不接收任何请求，并且此。$ 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()”方法的原因。

这是我的代码...

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'

  export default class List extends Vue {

    myQueryName='my default value';

    get apollo() {
      return {
        myQueryName: {
          query: require('../graphql/listMeta.graphql'),
          // prefetch: true <-- tried with and without this
        }
      }
    }

  }
</script>

<template>
  <div>

    <!-- THIS DOESN"T WORK ... -->
    queries are: {{this.$apollo.queries}} <!-- THIS JUST SHOWS AN EMPTY OBJECT: {} -->
    <hr>
    myQueryName value is: {{myQueryName}} <!-- …

我目前正在开发一个项目，在该项目中我使用了 nuxt、vue-apollo 和包装 vue-apollo 并将其集成到 nuxt 中的 nuxt apollo-module。

我的页面中定义了一个相当简单的智能查询：

<template>
  <div>
    <ul>
      <li v-for="itinerary in itineraries" :key="itinerary.id">
        {{ itinerary.id }}
      </li>
    </ul>
  </div>
</template>

<script>
import gql from 'graphql-tag';

export default {
  name: 'HomePage',
  apollo: {
    itineraries: {
      prefetch: true,
      query: gql`
        query {
          itineraries {
            id
          }
        }
      `
    }
  },
  data() {
    return {
      itineraries: []
    };
  }
};
</script>

从我从文档中了解到，预取应该在服务器上启动查询，但它不会阻塞，因此服务器端渲染将在返回数据之前继续。为了避免水化错误，nuxt apollo 模块应该使用 apollo 缓存来存储结果，如 Vue SSR 指南中所述：https : //ssr.vuejs.org/guide/data.html#data-store .

但是，当我加载页面时，我在控制台中看到了水化错误：

子节点与 VNode 不匹配：
NodeList …

我将Vue.js与Vue-Apollo一起使用，并启动 User 突变以登录用户。我正在使用 graph.cool 服务。

我有一个请求管道功能设置来捕获一些错误，例如无效的电子邮件。

当使用错误/无效输入发出请求时，catch()会触发我的错误（如预期），并且在网络选项卡中，我可以看到自定义错误消息的 JSON。但是，如果从 graph.cool 触发错误，我如何从 catch 中访问这些错误/响应？

例子：

signin () {
  const email = this.email
  const password = this.password

  this.$apollo.mutate({
    mutation: signinMutation,
    variables: {
      email,
      password
    }
  })
  .then((data) => {
    // This never fires on an error, so I can't 
    // show the user the errors in the network repsonse.
    console.log(data) 
  })
  .catch((error) => {
    // Error in this part fires in the console 
    // but I'm unable …

我正在使用nuxtwithapollo-module并且我需要拦截可能的网络错误（401/403 更具体），以便我可以显示一些错误模式并注销我的用户。在文档中，我看到在里面nuxt.config.js你可以这样做：

  apollo: {
    tokenName: 'Authorization',
    authenticationType: 'Bearer',
    errorHandler(error) { do something }
  }
...

但是在该配置文件中，我无法访问我需要的应用程序功能（例如错误模式或我的路由器）。有什么办法可以存档吗？

使用：

\n
• Django 3.x [ Django 过滤器 2.2.0、graphene-django 2.8.0、graphql-relay 2.0.1 ]
\n
• Vue 2.x [Vue-阿波罗]
\n

我正在使用 Django、GraphQL 和 Vue-Apollo 测试单页 vue app\xc2\xb4s。

如果我csrf_exempt在我的视图中使用，一切都会在前端运行。

urlpatterns = [\n<...>\n   path("graphql", csrf_exempt(GraphQLView.as_view(graphiql=True))),\n<...>\n

现在我想要 CSRF 保护我的请求。\n在理解 CSRF 保护的过程中，我认为 DjangoGraphQLView所需要的只是接收X-Csrftoken请求标头中的“值”。所以我专注于csrf以不同的方式发送值......通过像这样的单一视图

path(\'csrf/\', views.csrf),\npath("graphql", GraphQLView.as_view(graphiql=True)),\n

或者通过确保 cookieensure_csrf_cookie

然后在我的ApolloClienti 中获取这些 Value 并将其与请求 Header 一起发回。

这是当我从 Django-Vue 页面发送 GraphQL 请求时 Django 打印的内容。

Forbidden (CSRF token missing or …

我是 Vue 3 和 Apollo Composable 的新手。我首先创建了一个 Vuex 存储和一个模块服务来从 GraphQL 端点获取数据。此外，我注意到在实现过程中我无法在 setup() 之外调用 useMutation 和 useQuery。

我可以对此有更多解释吗？如果还有其他方法可以在 setup() 之外使用 useQuery 和 useMutation ，您可以向我展示它们吗？

我有一个无头 Craft CMS，它通过 Apollo 通过 GraphQL 端点将数据返回到我的 Nuxtjs 应用程序。我有一个可以返回三种不同块类型之一的字段：richText、image和pullQuote。

我的 GraphQL 端点如下所示：

query($section:[String], $slug:[String]) {
    entries(section: $section, slug: $slug) {
        id,
        title,
        uri,
        ... on blog_blog_Entry{
            contentEngine{
                __typename,
                ...on contentEngine_richText_BlockType{
                    __typename,
                    id,
                    richText
                    fontColor,
                    backgroundColor
                }
                ...on contentEngine_image_BlockType{
                    __typename,
                    id,
                    backgroundColor,
                    imageWidth,
                    image {
                        id,
                        url
                    }
                }
                ...on contentEngine_pullQuote_BlockType{
                    __typename,
                    id,
                    backgroundColor,
                    fontColor,
                    quote
                }
            }
        }
    }
}

它返回数据很好，但是当我尝试在 Nuxt 组件中使用它时出现此错误：

您正在使用简单（启发式）片段匹配器，但您的查询包含联合或接口类型。Apollo 客户端将无法准确映射片段。要消除此错误，请使用IntrospectionFragmentMatcher文档中所述的方法：https ://www.apollographql.com/docs/react/advanced/fragments.html#fragment-matcher

令人气愤的是，该文档导致了 404 错误。我发现了一些其他引用此链接的 …

我有一个用 Laravel 和 Lighthouse-php（用于 GraphQL）构建的 API。我的客户端使用 Vue js 构建，并使用 Apollo 进行 graphQL 客户端实现。每当我提出请求时，我都会收到以下错误：

Access to fetch at 'http://localhost:8000/graphql' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

自然地，我继续安装 laravel-cors 包，但后来我意识到它是我的 Laravel 安装（7.2.2）默认提供的。这意味着它\Fruitcake\Cors\HandleCors::class已经添加到中间件数组中Kernel.php，并且 cors 配置文件已经在我的配置目录中。

经过一些谷歌搜索，我意识到我需要添加\Fruitcake\Cors\HandleCors::class到route.middleware …