我有两个屏幕:
屏幕 1:结果
屏幕 2:编辑过滤器
当我在 Screen2 上编辑过滤器并按回时,我想重新获取 Screen1 上的查询(使用新构建的过滤器字符串变量)。编辑过滤器不使用突变或触发任何 Redux 操作(我将用户搜索过滤器/首选项存储在 localStorage/AsyncStorage 而不是数据库中,因此没有突变)。我只是更改表单的本地状态并使用它来构建我想传递给 Screen1 上的某个查询的过滤器字符串。如果有帮助,我可以访问两个屏幕上的过滤器字符串。
似乎refetch()仅限于其查询包装的组件http://dev.apollodata.com/react/receiving-updates.html#Refetch那么我将如何从不同的屏幕重新运行查询?
我尝试在 Screen1 和 Screen2 上放置相同的查询,然后在 Screen2 上调用 refetch,尽管查询有效并在 Screen2 上获取新数据,但我实际需要的 Screen1 上的同名查询并未更新。如果他们有相同的名字,不是应该的吗?(但过滤器变量改变了)
如果我只是错误地设计了这个并且有更简单的方法来做到这一点,请告诉我。我希望如果我有 2 个屏幕,在它们两个上放置相同的查询,并使用新的过滤器变量重新获取其中一个查询,那么重新获取应该在两个地方发生,但它目前正在单独处理它们。
在graphQLOptions中,context和rootvalue之间有什么区别?
我何时应该使用另一个,何时应该使用另一个?
目前我正在将连接器和其他敏感数据附加到上下文中,这样安全吗?用户可以读取查询的上下文或根值吗?
在 IOS 上,应用程序运行正常。但在 Android 上,我收到此错误。这是我在客户端和服务器中的配置。请帮忙!
错误: 错误图像
这是客户端的配置:
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws';
const networkInterface = createNetworkInterface({ uri: 'http://localhost:3000/graphql' });
const wsClient = new SubscriptionClient('ws://localhost:3000/subscriptions', {
reconnect: true,
});
const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
networkInterface,
wsClient,
);
export const client = new ApolloClient({
networkInterface: networkInterfaceWithSubscriptions,
});
Run Code Online (Sandbox Code Playgroud)
这是服务器上的配置:
import express from 'express';
import {
graphqlExpress,
graphiqlExpress,
} from 'graphql-server-express';
import bodyParser from 'body-parser';
import cors from 'cors';
import { execute, subscribe } from …Run Code Online (Sandbox Code Playgroud) 我正在使用 Apollo 和 GraphQL 进行 Angular 项目。我有一个突变,它更新了一个帐户列表,其中包含与之相关的相关详细信息。成功突变后,我使用 refetchqueries 查询 API 以获取更新的帐户列表。一切正常,直到这部分。
this.apollo.mutate({
mutation: mutationCreateNewAccount,
variables: {
accountNumber: this.accountNumber,
accountType: this.accountType,
routingNumber: this.routingNumber,
nameOfAcountHolder: this.name
},
refetchQueries: [{
query: queryAccounts,
variables: { accountNumber: this.accountNumber }
}]}).subscribe(({ data }) => console.log(data),
Run Code Online (Sandbox Code Playgroud)
订阅的“数据”从突变返回响应,但有没有办法使用“queryAccounts”返回的数据,它也作为此突变的一部分运行?
在反应中似乎有一种方法可以做到这一点,但我没有成功在 Angular 中做类似的事情。
我们在应用程序中使用 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 …Run Code Online (Sandbox Code Playgroud) 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));
Run Code Online (Sandbox Code Playgroud)
从客户端代码获取时,此查询会出错,但是当我在浏览器中的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,
)};
Run Code Online (Sandbox Code Playgroud) 我的应用程序分为客户端和服务器。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
}
})
); …Run Code Online (Sandbox Code Playgroud) 在我的node.js服务器中,我将CORS作为中间件包含在内,如下所示:
app.use(cors({ origin: 'http://<CORRECT_ORIGIN_URL>:3030', credentials: true }))
Run Code Online (Sandbox Code Playgroud)
我在发送请求的应用中使用Apollo Client,并在初始化ApolloClient时将凭据设置为“ include”,如下所示:
// Create a WebSocket link
const wsLink = process.browser ? new WebSocketLink({
uri: `ws://<CORRECT_REQUEST_URL>:8000/graphql`,
options: {
reconnect: true,
},
}) : null
// Create an http link (use batch, allow cookies response from server)
const httpLink = new BatchHttpLink({
uri: 'http://<CORRECT_REQUEST_URL>/api/',
credentials: 'include'
})
// Split terminating link for websocket and http requests
const terminatingLink = process.browser ? split(
({ query }) => {
const { kind, operation } = …Run Code Online (Sandbox Code Playgroud) apollo ×10
graphql ×5
angular ×2
express ×2
node.js ×2
react-apollo ×2
reactjs ×2
android ×1
apollostack ×1
cookies ×1
cors ×1
javascript ×1
networking ×1
next.js ×1
react-dnd ×1
react-native ×1
vue-apollo ×1