标签: apollo-angular

按照Apollo Angular docs，我应用此配置连接到给定的 graphql 端点：

import { HttpClientModule } from "@angular/common/http";
import { ApolloModule, APOLLO_OPTIONS } from "apollo-angular";
import { HttpLinkModule, HttpLink } from "apollo-angular-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    ApolloModule,
    HttpLinkModule
  ],
  providers: [{
    provide: APOLLO_OPTIONS,
    useFactory: (httpLink: HttpLink) => {
      return {
        cache: new InMemoryCache(),
        link: httpLink.create({
          uri: "https://my.endpoint.io/graphql"
        })
      }
    },
    deps: [HttpLink]
  }],
})
export class AppModule {}

是否可以使用相同的配置连接到另一个 graphql 端点？

有本节中展示了如何使用多个客户端的文档，但我不知道怎样才能用它申请apollo-angular-link-http

谢谢。

我有这个服务器 API 用于帐户分页

 {
  accounts (offset: 2, limit: 1) {
    key
    name
  }
}

使用 Graphiql 一切正常

{
  "data": {
    "accounts": [
      {
        "key": "fde3d97d-6a44-4c36-bc59-149a3e8e51ac",
        "name": "a0f353611567c83e"
      }
    ]
  }
}

我按照 Apollo 文档将我的 Web 客户端连接到后端。默认查询有效，但是当我尝试添加变量时，我在服务器端收到此错误。

WARN  g.GraphQL - Query failed to validate : 'query Accounts($offset: Int, $limit: Int) {
      accounts(offset: $offset, limit: $limit) {
        key
        name
        __typename
   }
 }

我的角度（7）代码如下所示：

import { Component, OnInit } from "@angular/core";
import { Apollo, QueryRef } from "apollo-angular";
import { DocumentNode } from …

下面是我的apollo angular设置代码：

providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: (httpLink: HttpLink) => {
        return {
          cache: new InMemoryCache(),
          link: httpLink.create({
            uri: AppSettings.API_ENDPOINT

          })
        }
      },
      deps: [HttpLink]
    }
  ],

我想在下面使用：

const link = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
      ),
    );

  if (networkError) console.log(`[Network error]: ${networkError}`);
});

如何链接它以便我能够在控制台中收到错误？

好吧，我看到了很多关于如何为 apollo-express 启用 cors 的答案，但我还没有找到真正适合 apollo-server-lambda 的答案。

这是我从 chrome 收到的错误：

Access to XMLHttpRequest at 'https://5j3gae3086.execute-api.us-east-2.amazonaws.com/alpha/'
from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight
request doesn't pass access control check: The 'Access-Control-Allow-Origin' header
has a value 'https://example.com' that is not equal to the supplied origin.

我不知道如何更改值“https://example.com”。这是我尝试创建服务器的代码：

Access to XMLHttpRequest at 'https://5j3gae3086.execute-api.us-east-2.amazonaws.com/alpha/'
from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight
request doesn't pass access control check: The 'Access-Control-Allow-Origin' header
has a value 'https://example.com' that …

我正在使用 apollo-angular 构建一个前端应用程序。在我的应用程序中，我使用带有短期访问令牌和长期刷新令牌的 JWT 身份验证系统（它们在仅 HTTP cookie 中传输，而不是开始存储在 HTTP 标头中）。

当我运行我的应用程序时，我可以成功登录，但是当访问令牌过期时，我收到以下错误并且我在浏览器上看不到任何内容。
Error: Network error: Cannot read property 'refresh' of undefined at new ApolloError

我的代码如下：

GraphQLModule（它是在 AppModule 中导入的）（部分基于此问题）

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
import { ApolloLink, Observable } from 'apollo-link';
import { onError } from 'apollo-link-error';

import { AuthService } from …

问题描述

我有一个 Angular 聊天组件，它通过 graphql 查询从后端获取消息。在同一查询中，当通过 graphql 突变添加新消息时，我订阅更新。

消息订阅被编码为聊天组件的方法，以便我可以在组件首次呈现时在角度生命周期方法中调用它。

这是根据 apollo 中的文档进行订阅的通常设置： https: //apollo-angular.com/docs/data/subscriptions

当我调用编码了订阅的方法时，出现以下错误：

“无法从另一模块或领域使用 GraphQLSchema“[object GraphQLSchema]”。确保 node_modules 目录中只有一个“graphql”实例。如果不同版本的“graphql”是其他依赖模块的依赖项，请使用“分辨率”，以确保只安装一个版本。https: //yarnpkg.com/en/docs/selective-version-resolutions 不能同时使用重复的“graphql”模块，因为不同版本可能具有不同的功能和行为。函数中使用的一个版本的数据可能会产生令人困惑和虚假的结果。”

我知道错误来自该方法的调用，当我注释掉该调用时，错误就消失了。订阅不会查询后端，因此我知道问题出在客户端。

预期行为

当用户在聊天中发送新消息时，服务器会收到订阅解析器（服务器端）发生消息更新的通知，它将实时将所有消息回传到前端，并且消息应该是通过订阅更多方法返回。

我为解决这个问题所采取的步骤

我尝试查看这个问题： 无法使用重复的“graphql”模块

这让我找到了这个链接： https://github.com/graphql/graphql-js/issues/491

对于使用yarn作为包管理器的人来说，有一个解决方法，但这并不关心我，因为我使用npm。

我认为可能存在重复的 graphql 模块，因此我尝试清理 package.json 文件，删除节点模块并重新安装它们，但这不起作用。

代码示例

聊天组件

import { Component, OnInit } from '@angular/core';
import { Apollo, QueryRef, gql } from 'apollo-angular';

const MESSAGES_SUBSCRIPTION = gql`
   subscription {
     messagesAdded {
      id
      content
      user
    }
  }
`;

const GET_MESSAGES = gql`
   query messages{
     messages {
      id
      content
      user
    }
  } …

Run Code Online (Sandbox Code Playgroud)

我在 angular 10 中使用 apollo，运行后出现此问题 ng serve

目标入口点“apollo-angular”中的错误缺少依赖项：

• @角度/核心
• 阿波罗客户端
• rxjs
• rxjs/运营商
• 阿波罗链接

是否有一个命令可以在我的项目中安装所有这些缺失的依赖项……尽管我认为我已经安装了所有这些……奇怪的是我有这些错误。有人能给我一些智慧吗，提前谢谢你