How to write to apollo cache from within React component with out losing context of “this”

[亡魂溺海] 提交于 2019-12-07 18:59:53

问题


I'm having trouble trying to read from apollo cache from within a react component the mutation works and writes to my server and returns the data but when passed to my update function it seems to lose the context of this when in 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);

is it to do with me binding this to the onSubmit button? if so what is the proper way to attach a function to a element without losing context of this within the component and still allow apollo cache to function properly.


回答1:


I was losing the context of this because I was deconstructing the first argument. this is what I settled on in the end.

It throw errors when there were no allAuthors on the ROOT_QUERY object so added it to my return statement.

this doesn't feel like an ideal way of updating the cache shouldn't default param passed to readQuery prevent the error thrown.

 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
    });
  }


来源:https://stackoverflow.com/questions/51081591/how-to-write-to-apollo-cache-from-within-react-component-with-out-losing-context

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!