如何在不丢失“this”上下文的情况下从 React 组件中写入 apollo 缓存

Posted 2023-03-10

【中文标题】如何在不丢失“this”上下文的情况下从 React 组件中写入 apollo 缓存

【英文标题】：How to write to apollo cache from within React component with out losing context of "this"

【发布时间】：2018-12-07 11:02:02

【问题描述】：

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

“apollo-cache-inmemory”：“^1.2.5” “反应阿波罗”：“^2.1.4” “apollo-boost”：“^0.1.7”

TypeError：无法读取未定义的属性“读取” 在 ./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);

这与我将其绑定到 onSubmit 按钮有关吗？如果是这样，将函数附加到元素而不丢失组件中 this 的上下文并且仍然允许 apollo 缓存正常运行的正确方法是什么。

【参考方案1】：

我正在失去上下文，因为我正在解构第一个论点。这就是我最终决定的。

当 ROOT_QUERY 对象上没有 allAuthors 时会引发错误，因此将其添加到我的 return 语句中。

这感觉不是更新缓存的理想方式，不应将默认参数传递给 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
    );