标签: apollo

我们在应用程序中使用 Apollo/Graphql，但遇到了一个问题。

该应用程序是在 Angular 5 中开发的，NodeJS 作为后端，graphql 服务器将响应前端。为了以 Angular 拦截 Http 请求，我们实现了“HttpInterceptor”，以便我们可以以自定义的方式处理错误。但是，Apollo 请求不会通过这个拦截器。

为了正确处理错误，我们使用了“apollo-link-error”。

但是我们想知道是否有可能以类似于 HttpInterceptor 的方式拦截 apollo 请求。

我正在尝试创建一个乐观的响应，其中 ui 会通过拖放数据立即更新（最小延迟和更好的用户体验）。然而，我遇到的问题是它无论如何都会滞后。

所以发生的事情是我希望从我的查询中得到一个区域和未分配区域的列表，unassignedZone 是一个对象，其中包含城市，区域是一个区域列表，其中包含城市。在编写我的突变时，我会在拖放它们后返回重新排序的新区域列表。重新排序是由名为“DisplayOrder”的区域对象上的字段完成的。逻辑是正确设置数字。问题是，当我尝试用乐观的 ui 和更新来模仿它时，会有一点延迟，就像它仍在等待网络一样。

我试图实现的大部分内容都发生在 onDragEnd = () => { ... } 函数中。

import React, { Component } from "react";
import { graphql, compose, withApollo } from "react-apollo";
import gql from "graphql-tag";
import { withState } from "recompose";
import { withStyles } from "@material-ui/core/styles";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import Input from "@material-ui/core/Input";
import Grid from "@material-ui/core/Grid";
import InputLabel from "@material-ui/core/InputLabel";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import AppBar from "@material-ui/core/AppBar";
import …

const httpLink = createHttpLink({
  uri: 'http://localhost:3090/'
})

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache()
})

client.query({
  query: gql`
    query users {
        email
    }
  `,
})
  .then(data => console.log(data))
  .catch(error => console.error(error));

从客户端代码获取时，此查询会出错，但是当我在浏览器中的http://localhost:3090/graphql上执行此查询时，它会正确获取数据

我正在尝试禁用Apollo 上的缓存，因此我正在关注文档apollo-client ，但我无法成功，我一直收到此警告 ApolloBoost was initialized with unsupported options: defaultOptions

有没有人有同样的警告？

import Vue from 'vue'
import ApolloClient from 'apollo-boost'

    const defaultOptions = {
      watchQuery: {
        fetchPolicy: 'network-only',
        errorPolicy: 'ignore'
      },
      query: {
        fetchPolicy: 'network-only',
        errorPolicy: 'all'
      }
    }

    const client = new ApolloClient({

    defaultOptions: defaultOptions,
    )};

我的应用程序分为客户端和服务器。Client 是托管在 Now.sh 上的前端 Nextjs 应用程序，Server 是其后端使用 Express 创建并托管在 Heroku 上，因此域是 client-app.now.sh 和 server-app.herokuapp.com 。

验证

身份验证系统基于 cookie，我使用 express-session 来实现它。这是我的快速会话配置

app.use(
  session({
    store:
      process.env.NODE_ENV === "production"
        ? new RedisStore({
            url: process.env.REDIS_URL
          })
        : new RedisStore({
            host: "localhost",
            port: 6379,
            client
          }),
    name: "sessionID",
    resave: false,
    saveUninitialized: false,
    secret: keys.SESSION,
    unset: "destroy",
    cookie: {
      domain:
        process.env.NODE_ENV === "production"
          ? ".client-app.now.sh"
          : "localhost",
      secure: process.env.NODE_ENV === "production",
      httpOnly: true,
      maxAge: 7 * 24 * 60 * 60 * 1000
    }
  })
); …

1. 有没有办法通过覆盖所有查询和突变的SchemaDirectiveVisitor 方法之一来添加模式指令？例如，检查指令中的身份验证令牌。最好不要为每个定义的查询/突变添加一次。

2. 如果是，应覆盖以下哪一种方法以及如何覆盖？我无法找到有关如何覆盖每个示例的示例。

   • visitSchema(schema: GraphQLSchema)
   • visitScalar(scalar: GraphQLScalarType)
   • visitObject(object: GraphQLObjectType)
   • visitFieldDefinition(field: GraphQLField<any, any>)
   • visitArgumentDefinition(argument: GraphQLArgument)
   • visitInterface(iface: GraphQLInterfaceType)
   • visitUnion(union: GraphQLUnionType)
   • visitEnum(type: GraphQLEnumType)
   • visitEnumValue(value: GraphQLEnumValue)
   • visitInputObject(object: GraphQLInputObjectType)
   • visitInputFieldDefinition(field: GraphQLInputField)