标签: apollo

Apollo客户端突变错误处理

我在服务器上使用GraphQL和猫鼬。

发生验证错误时,GraphQL突变会发送状态码为200的响应。在客户端,响应如下所示:

{
  "data": null,
  "errors": [{
    "message": "error for id...",
    "path": "_id"
  }]
}
Run Code Online (Sandbox Code Playgroud)

我想使用catchapollo-client突变承诺的功能来访问验证错误。就像是:

      this.props.deleteProduct(this.state.selectedProductId).then(response => {
         // handle successful mutation
      }).catch(response => {
         const errors = response.errors; // does not work
         this.setState({ errorMessages: errors.map(error => error.message) });
      });
Run Code Online (Sandbox Code Playgroud)

如何才能做到这一点?

apollo graphql apollo-client

8
推荐指数
2
解决办法
9407
查看次数

GraphQL如何避免输入和输出类型之间的重复代码

我是GraphQL的新手,但我真的很喜欢它.现在,我正在玩接口和工会,我面临着突变的问题.

假设我有这个架构:

interface FoodType {
    id: String
    type: String
    composition: [Ingredient]
  }

  type Pizza implements FoodType {
    id: String
    type: String
    pizzaType: String
    toppings: [String]
    size: String
    composition: [Ingredient]
  }

  type Salad implements FoodType {
    id: String
    type: String
    vegetarian: Boolean
    dressing: Boolean
    composition: [Ingredient]
  }

  type BasicFood implements FoodType {
    id: String
    type: String
    composition: [Ingredient]
  }

  type Ingredient {
      name: String
      qty: Float
      units: String
  }
Run Code Online (Sandbox Code Playgroud)

现在,我想创造新的食品,所以我开始做这样的事情:

type Mutation {
    addPizza(input:Pizza):FoodType
    addSalad(input:Salad):FoodType
    addBasic(input:BasicFood):FoodType
}
Run Code Online (Sandbox Code Playgroud)

这不起作用有两个原因:

  1. 如果我想将对象作为参数传递,则该对象必须是"输入"类型.但"披萨","沙拉"和"基本食品"只是"类型".
  2. 输入类型无法实现接口.

所以,我需要修改我之前的架构,如下所示: …

interface apollo graphql

8
推荐指数
1
解决办法
1259
查看次数

apollo(graphQL)-如何在查询中发送对象数组

我想在graphQL查询中发送对象数组。但是我不知道如何在查询$ gallery中键入指针:其中Type将是一个简单的数据结构,如类或字典。

 apollo_client.mutate({mutation: gql`
          mutation m(
            $title: String!, $gallery:<Type?>){
              mutatePmaGallery(pmaData:
                {title: $title, gallery: $gallery}) {
                  pma{
                    id
                  }
                }
              }`,
            variables: {
              title:      _this.state.title,
              gallery:    {<Type?>}
            })
Run Code Online (Sandbox Code Playgroud)

apollo graphql

8
推荐指数
1
解决办法
2610
查看次数

角度Apollo错误处理

大家好,我对apollo-angular和apollo-link-error的问题有点困惑.我尝试了几种不同的方法,我似乎无法在我的角度网络应用程序中捕获客户端的任何错误.我在下面发布了我的尝试.任何建议或一组额外的眼睛将非常感激.

基本上我所要做的就是当发生错误时提示我的用户有关问题.如果有人有一些替代npm包而不是apollo-link-error我都是耳朵.

尝试1:

export class AppModule {
  constructor (apollo: Apollo, httpLink: HttpLink) {
    apollo.create({
      link: httpLink.create({
        uri: 'http://localhost:8080/graphql'
      }),
      cache: new InMemoryCache()
    });

    const error = onError(({ networkError }) => {
      const networkErrorRef:HttpErrorResponse = networkError as HttpErrorResponse;
      if (networkErrorRef && networkErrorRef.status === 401) {
        console.log('Prompt User', error);
      }
    });
  }
}
Run Code Online (Sandbox Code Playgroud)

尝试2:

export class AppModule {
  constructor (apollo: Apollo, httpLink: HttpLink) {
    apollo.create({
      link: httpLink.create({
        uri: 'http://localhost:8080/graphql'
      }),
      cache: new InMemoryCache()
    });

    const error = onError(({networkError}) => {
      if (networkError.status …
Run Code Online (Sandbox Code Playgroud)

typescript apollo apollo-client angular

8
推荐指数
2
解决办法
2883
查看次数

处理ag网格反应并呈现复选框网格

我正在搞乱ag-grid,react-apollo,一切似乎都运转正常.这里的目标是单击一个复选框,并在修改某些数据时发生变异/网络请求.我遇到的问题是它重绘整行,这可能非常慢但我真的只是想更新单元本身,所以它的快速和用户体验更好.我有一个想法是做一个乐观的更新,只是更新我的缓存/利用我的缓存.你们采取了什么方法.

通过apollo查询抓取列和行数据.

下面是一些代码:

CheckboxRenderer

import React, { Component } from "react";
import Checkbox from "@material-ui/core/Checkbox";
import _ from "lodash";

class CheckboxItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: false
    };
    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
  }

  componentDidMount() {
    this.setDefaultState();
  }

  setDefaultState() {
    const { data, colDef, api } = this.props;
    const { externalData } = api;
    if (externalData && externalData.length > 0) {
      if (_.find(data.roles, _.matchesProperty("name", colDef.headerName))) {
        this.setState({
          value: true
        });
      }
    }
  }

  updateGridAssociation(checked) {
    const { …
Run Code Online (Sandbox Code Playgroud)

apollo reactjs ag-grid ag-grid-react react-apollo

8
推荐指数
1
解决办法
723
查看次数

在查询上遇到了一个子选择,但是商店没有对象引用Apollo Link State

这是从服务器获取所有数据的主要查询.

查询从服务器获取数据

然后我想在Apollo链接状态下设置它.

要设置链接状态,这是我的解析器.

用于链接状态的解析器

这是我的客户端/缓存查询以获取先前的缓存状态.

本地客户端/缓存查询

我不知道我在哪里遗漏了什么.

ApolloError.js:37未捕获(在承诺中)错误:网络错误:遇到查询的子选择,但商店没有对象引用.除非您有直接操作商店的自定义代码,否则在正常使用期间永远不会发生这种情况; 请提出问题.

apollo reactjs graphql

8
推荐指数
1
解决办法
1052
查看次数

如何使用阿波罗服务器从服务器设置响应头?

我有一个可以在过期时更新用户令牌的应用程序。我需要使用此令牌更新客户端以防止错误。我实际上无法将新令牌放入前端,因为似乎无法在响应中设置任何内容。我可以在后端使用Graphql和护照,如果有帮助的话。

我已经尝试过res.send,res.setheader等...

有谁知道如何从apollo服务器向apollo客户端发送新的标头条目?

node.js apollo reactjs graphql apollo-client

8
推荐指数
1
解决办法
412
查看次数

是否可以有部分联合网关?

我想联合服务,但为了简单起见,让联合网关也拥有自己的模式和逻辑,可以代理 REST API 端点。现在看起来我需要分别拥有联合网关服务、联合 graphql 服务和其余 <->graphql 桥接服务。无论如何,在我们的例子中,rest-graphql 网关至少暂时可以位于联邦网关中,以避免不必要的引导和维护。

看起来阿波罗联邦网关localServiceList似乎正是为了这个目的。一个示例配置:

const gateway = new ApolloGateway({
    serviceList: [
        { name: "some-service", url: "http://localhost:40001/graph" }
    ],
    localServiceList: [
        { name: "rest-bridge", typeDefs }
    ]
});
Run Code Online (Sandbox Code Playgroud)

但它并没有解决问题:如果有 localServiceList,它会跳过 serviceList。

所以问题是:这是否可以在阿波罗联盟网关中保存自己的模式和逻辑?

federation apollo graphql apollo-server apollo-federation

8
推荐指数
1
解决办法
1304
查看次数

GraphQL 查询 ID 以外的其他内容

我正在使用Strapi和 Nuxt.js 来实现我的第一个 Headless CMS。我正在使用 Apollo 和 GraphQL。

我遇到了当前的错误,并且好几天都没能解决这个问题。

如果我写:

query Page($id: ID!) {
  page(id: $id) {
    id
    slug
    title
  }
}
Run Code Online (Sandbox Code Playgroud)

并传递以下变量:

{
  "id" : "1"
}
Run Code Online (Sandbox Code Playgroud)

我收到了正确的预期结果:

{
  "data": {
    "page": {
      "id": "1",
      "slug": "/",
      "title": "Homepage"
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

但是,我想不通过 ID 获取内容,而是通过我在 Strapi 中创建的名为“slug”的字段获取内容。环顾四周,似乎我应该能够执行以下操作:

query Page($slug: String!) {
  page(slug: $slug) {
    id
    slug
    title
  }
}
Run Code Online (Sandbox Code Playgroud)

带变量:

{
  "slug" : "/"
}
Run Code Online (Sandbox Code Playgroud)

但我收到此错误:

{
  "error": {
    "errors": [
      {
        "message": "Unknown argument \"slug\" on …
Run Code Online (Sandbox Code Playgroud)

apollo graphql strapi nuxt.js

8
推荐指数
1
解决办法
3096
查看次数

apollo 的 MockedProvider 没有明确警告缺少模拟

我正在使用 apollo hooks ( useQuery, useMutation)对 React 组件进行单元测试,并且在测试中我使用 apollo 的MockedProvider. 问题是,有时,我的模拟与组件实际进行的查询不匹配(创建模拟时输入错误,或者组件演变并更改了某些查询变量)。发生这种情况时,MockedProvided向组件返回一个 NetworkError。但是在测试套件中,没有显示警告。这令人沮丧,因为有时我的组件对useQuery. 这导致我曾经通过的测试突然无声无息地失败,让我很难找到原因。

这是使用useQuery以下组件的示例:

import React from 'react';
import {gql} from 'apollo-boost';
import {useQuery} from '@apollo/react-hooks';


export const gqlArticle = gql`
  query Article($id: ID){
    article(id: $id){
      title
      content
    }
  }
`;


export function MyArticleComponent(props) {

  const {data} = useQuery(gqlArticle, {
    variables: {
      id: 5
    }
  });

  if (data) {
    return (
      <div className="article">
        <h1>{data.article.title}</h1>
        <p>{data.article.content}</p>
      </div>
    );
  } else { …
Run Code Online (Sandbox Code Playgroud)

unit-testing apollo reactjs react-apollo apollo-client

8
推荐指数
1
解决办法
5012
查看次数