gpt4 book ai didi

javascript - 如何在不丢失 "this"上下文的情况下从 React 组件写入 apollo 缓存

转载 作者:行者123 更新时间:2023-11-29 16:02:17 28 4
gpt4 key购买 nike

我在尝试从 react 组件中读取 apollo 缓存时遇到问题,突变起作用并写入我的服务器并返回数据,但是当传递到我的更新函数时,它似乎丢失了在 inMemoryCache.js

中的上下文
  • "apollo-cache-inmemory": "^1.2.5"
  • "react-apollo": "^2.1.4"
  • "apollo-boost": "^0.1.7"

TypeError: Cannot read property 'read' of undefined at ./node_modules/apollo-cache-inmemory/lib/inMemoryCache.js.InMemoryCache.readQuery

import React, { Component } from "react";
import { graphql } from "react-apollo";
import trim from "lodash/trim";

import AuthorForm from '../components/author-form';

import ALL_AUTHORS from "../graphql/getPosts.query";
import CREATE_AUTHOR from "../graphql/createAuthor.mutation";

class CreateAuthor extends Component {
state = {
errors: false
};

onSubmit(event) {
event.preventDefault();

const form = new FormData(event.target);

const data = {
firstName: form.get("firstName"),
lastName: form.get("lastName")
};

if (!data.firstName || !data.lastName) {
return this.setState({ errors: true });
}

this.create({
firstName: trim(data.firstName),
lastName: trim(data.lastName)
});
}

async create(variables) {
const { createAuthor } = this.props;
this.setState({ errors: false });

try {
await createAuthor({
variables,
update: (cache, data) => this.updateCache(cache, data)
})
} catch (e) {
this.setState({ errors: true })
}
}

updateCache({ readQuery, writeQuery }, { data: { createAuthor }, errors }) {
if (errors) {
return;
}
const { allAuthors } = readQuery({
query: ALL_AUTHORS,
defaults: {
allAuthors: []
}
});
/*eslint-disable*/ console.log(allAuthors);
}

render() {
return (
<div>
<AuthorForm onSubmit={this.onSubmit.bind(this)}/>
<OnError/>
</div>
);
}
}

export default graphql(CREATE_AUTHOR, { name: "createAuthor" })(CreateAuthor);

是不是跟我绑定(bind)了onSubmit按钮有关?如果是这样,在不丢失组件内 this 上下文的情况下将函数附加到元素的正确方法是什么,并且仍然允许 apollo 缓存正常运行。

最佳答案

我失去了这方面的背景,因为我正在解构第一个论点。这是我最终确定的。

当 ROOT_QUERY 对象上没有 allAuthors 时它会抛出错误,因此将它添加到我的返回语句中。

这不是更新缓存的理想方式,不应该将默认参数传递给 readQuery 以防止抛出错误。

 updateCache(cache, { data: { createAuthor }, errors }) {
if (errors || !cache.data.data.ROOT_QUERY.allAuthors) {
return;
}

const query = ALL_AUTHORS;

const { allAuthors } = cache.readQuery({
query,
defaults: {
allAuthors: []
}
});

const data = {
allAuthors: allAuthors.concat([createAuthor])
};

cache.writeQuery({
query,
data
});
}

关于javascript - 如何在不丢失 "this"上下文的情况下从 React 组件写入 apollo 缓存,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51081591/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com