我正在尝试通过 Apollo-Client 将 Angular2 与 GraphQL 一起使用。我遵循了文档,一切似乎都正常。但是文档只解释了如何从组件连接到 GraphQL。没有关于如何使用服务进行服务器调用的信息,或者对我来说更重要的是如何将 Angular2 路由解析器与 Apollo 查询或 watchQuery 一起使用。
我找到了一个关于如何使用 Apollo 查询将此逻辑移动到服务的解决方案,它似乎有效,但是我无法使用 Apollo watchQuery 方法让它工作。有人对可能的解决方案有任何想法吗?
或者我将 GraphQL 调用移动到服务和使用解析器的方法是错误的,GraphQL 逻辑应该简单地留在组件中?
我正在尝试使用封装Chat两个查询和一个突变的组件compose。
但是,控制台中仍然出现以下错误:
未捕获的错误:
react-apollo每个HOC仅支持查询,订阅或突变。[object Object]有2个查询,0个订阅和0个突变。您可以使用'compose'将多种操作类型连接到一个组件
这是我的查询和导出语句:
// this query seems to cause the issue
const findConversations = gql`
query allConversations($customerId: ID!) {
allConversations(filter: {
customerId: $customerId
})
} {
id
}
`
const createMessage = gql`
mutation createMessage($text: String!, $conversationId: ID!) {
createMessage(text: $text, conversationId: $conversationId) {
id
text
}
}
`
const allMessages = gql`
query allMessages($conversationId: ID!) {
allMessages(filter: {
conversation: {
id: $conversationId
}
})
{
text
createdAt …Run Code Online (Sandbox Code Playgroud) 我在平面列表中有以下按钮触发graphql变异,在变异后我执行writeQuery来更新本地缓存(存储).在更新函数f中,我正在更新缓存中的两个字段.基本上当用户触摸类似按钮时,我将类似的布尔值变为true,并将该帖子的类似计数更新为+1(类似于twitter).但是,平面列表中的组件不会更新.我甚至打印出了apollo商店/缓存,我看到值得到了更新.为什么在缓存写入后平面列表不能重新渲染?
render() {
const { posts, isFetching, lastUpdated, location, navigation, data, likeMutation, username, distancePointLatitude, distancePointLongitude, searchPointLatitude, searchPointLongitude } = this.props
<FlatList
data={data.near}
style={styles.scrollViewContent}
extraData={this.props.store}
//renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
showsVerticalScrollIndicator={false}
onRefresh={this._onRefresh.bind(this)}
refreshing={this.state.refreshing}
keyExtractor={this._keyExtractor}
renderItem={({item, index}) => item.posts.length != 0 && <ListItem>
{item.posts[0].userInteraction.userLike ? <Icon name='md-heart' style={{ color: 'crimson',fontSize: 28}} />
: <Icon name='heart' style={{ fontSize: 26}}
onPress={() => likeMutation({ variables: { elementId: item.posts[0].postId, userId: username },
update: (store, { data: { addLike } }) => {
// Read …Run Code Online (Sandbox Code Playgroud) 假设我有一个createPost插入新帖子的变异。在典型的应用中,该突变可以:
Post。我要实现的是一个中间场景,在该场景中,突变成功(返回Post);而且还会以某种方式向用户返回警告(例如Your post is similar to post XYZ,类似的警告)。
实现此目的的一个好的GraphQL模式是什么?warning在Post类型中添加字段似乎有点怪异,但是我又不确定如何在相同的突变中同时返回a Post和a Warning?有任何想法吗?
(请注意,我以这种情况为例,我对返回额外的突变后数据的通用模式感兴趣,而不是专门查找类似的帖子)
我不确定最佳做法是variables采用refetchQueries期权。在下面的示例中,变量为{id: this.props.item.id}
但是传递由于未实例化而this.props.item.id返回错误,MyComponent因此this.props未定义。
function mapStateToProps(state) {
return {
item: state.item
};
}
MyComponent = connect(mapStateToProps, matchDispatchToProps)(
MyComponent
);
MyComponent = graphql(createItemImage, {
name: "createItemImage",
options: {
refetchQueries: [
{
query: getEntity,
variables: { id: this.props.item.id }
}
]
}
})(MyComponent);
Run Code Online (Sandbox Code Playgroud)
该id值仅在运行时可用。
提前致谢!
Apollo客户端是否有类似mapStateToProps(Redux)之类的东西?
假设我有一个组件,查询后我知道缓存中有数据,因此我执行以下操作:
class Container extends React.Component {
...
...
render() {
const notes = this.props.client.readFragment(NOTES_FRAGMENT)
// notes has everything I need
return (<Child notes={notes} />);
}
}
export default WithApollo(Container);
Run Code Online (Sandbox Code Playgroud)
但是,当我有一个名为mutation并进行更新的同级组件时,该<Child />组件的道具永远不会得到更新。
class AnotherContainer extends React.Component {
render() {
return(
<Mutation
mutation={UPDATE_NOTE}
update={(cache, {data: {updateNote}}) =? {
const list = cache.readFragment({
fragment: NOTES_FRAGMENT
})
// manipulate list
cache.writeFragment({fragment:NOTES_FRAGMENT, data })
}
}
)
}
}
Run Code Online (Sandbox Code Playgroud)
所以我的问题是,<Child />每当我执行writeFragment时如何更新组件的道具?是否有诸如mapStateToProps之类的东西可以将notes道具“连接” 到缓存,所以无论何时更新,都会触发React生命周期?
我有一堆信息存储在我的状态中,我需要使用突变传递给我的graphQL服务器,但是我需要在调用下一个突变之前使用每个突变的结果,因为我需要:
我注意到apollo Mutation组件有一个onCompleted回调,但我不知道如何使用这个回调来触发另一个突变或者是否正确解决我的问题.我还研究了将我的突变配对以立即发送它们,但似乎也不是解决方案.任何帮助,将不胜感激
我正在尝试更好地理解COR,因为我们的网络应用程序的几个用户抱怨,因为他们升级到iOS 12他们正在接收预检错误.
Web检查员的错误
[Error] Preflight response is not successful
[Error] Fetch API cannot load https://www.api.com due to access control checks.
[Error] Failed to load resource: Preflight response is not successful (v4, line 0)
Run Code Online (Sandbox Code Playgroud)
客户端应用程序是Apollo的React应用程序.它使用Apache HTTPD和Express JS通过HTTPS调用服务器.
在所有其他浏览器上一切正常,这与iOS 12隔离.
奇怪的是,当我浏览HTTPD访问日志时,我看不到任何预检电话.当我尝试直接点击服务器时(在iOS 12上),我在日志中看到了预检OPTIONS请求和POST.但是当通过Web应用程序调用服务器时,COR的预检失败了.
在快递应用程序中,我还注销了所有请求,但它也没有出现.
在HTTPD我有设置
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS
Run Code Online (Sandbox Code Playgroud)
在表达我有同样的事情.
有任何想法吗?!
const { RedisCache } = require('apollo-server-cache-redis');
const server = new ApolloServer({
typeDefs,
resolvers,
cache: new RedisCache({
host: 'redis-server',
// Options are passed through to the Redis client
}),
dataSources: () => ({
moviesAPI: new MoviesAPI(),
}),
});
Run Code Online (Sandbox Code Playgroud)
我想知道如何使用该cache密钥,因为考虑到缓存实际上是自定义实现的MoviesAPI(),然后通过来使用context.dataSources.moviesAPI.someFunc()。例如,假设我想为SQL数据库实现自己的缓存。看起来像
cache: new RedisCache({
host: 'redis-server',
}),
dataSources: () => ({
SQL: new SQLCache(),
}),
});
Run Code Online (Sandbox Code Playgroud)
在哪里SQLCache有我自己的功能连接到RedisCache类似:
getCached(id, query, ttl) {
const cacheKey = `sqlcache:${id}`;
return redisCache.get(cacheKey).then(entry => {
if …Run Code Online (Sandbox Code Playgroud) apollo ×10
graphql ×6
reactjs ×4
react-apollo ×3
apollostack ×2
javascript ×2
angular ×1
cors ×1
express ×1
ios ×1
ios12 ×1
react-native ×1
redux ×1