In this lesson I refactor a React component that utilizes a higher-order component for mutations to the new Mutation render prop component baked into react-apollo 2.1.

Additional Resources: https://dev-blog.apollodata.com/introducing-react-apollo-2-1-c837cc23d926

If you want to mutate the server state, you can use <Mutation> component to simplify the code:

const ADD_ITEM = gql`
mutation addItem($value: String!) {
addItem(value: $value) @client
}
`; const client = new ApolloClient({
clientState: {
defaults,
resolvers: {
Mutation: {
addItem: (_, { value }, { cache }) => {
let { items } = cache.readQuery({ query: GET_ITEMS });
items = [...items, value];
cache.writeData({ data: { items } });
return null;
}
}
}
}
}); const AddItem = () => {
let input;
return (
<Mutation mutation={ADD_ITEM}>
{(addItem, { loading, error, data }) => (
<div>
<form
onSubmit={e => {
e.preventDefault();
addItem({ variables: { value: input.value } });
input.value = "";
input.focus();
}}
>
<input ref={node => (input = node)} />
<button type="submit">Add Item</button>
</form>
</div>
)}
</Mutation>
);
};

[GraphQL] Apollo React Mutation Component的更多相关文章

  1. [GraphQL] Apollo React Query Component

    In this lesson I refactor a React component that utilizes the graphql higher-order component to the ...

  2. GraphQL + React Apollo + React Hook 大型项目实战(32 个视频)

    GraphQL + React Apollo + React Hook 大型项目实战(32 个视频) GraphQL + React Apollo + React Hook 大型项目实战 #1 介绍「 ...

  3. [React + GraphQL] Use useLazyQuery to manually execute a query with Apollo React Hooks

    When using useQuery from Apollo React Hooks, the request will be sent automatically after the compon ...

  4. GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频)

    GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频) GraphQL + React Apoll ...

  5. React & styled component

    React & styled component https://www.styled-components.com/#your-first-styled-component tagged t ...

  6. GraphQL & Apollo & Vue

    GraphQL & Apollo & Vue https://www.howtographql.com/vue-apollo/0-introduction/ https://githu ...

  7. react slot component with args

    react slot component with args how to pass args to react props child component https://codesandbox.i ...

  8. react hooks & component will unmount & useEffect & clear up

    react hooks & component will unmount & useEffect & clear up useEffect & return === u ...

  9. meteor 为基础,联合 Apollo + React + React-Router

    Graphql with Apollo, Meteor and React: https://janikvonrotz.ch/2016/10/09/graphql-with-apollo-meteor ...

随机推荐

  1. PCB SLOT槽孔数量计算方法,同CAM350孔数一致 实现方法

    最近有好几个写脚本的朋友问我,SLOT槽孔孔的如何计算的,要求孔数与CAM350孔数保持一致. 前几年通过在CAM350里面不断测试,结果是:CAM 350中SLOT槽孔,孔与孔之间最高位,凸位高度值 ...

  2. lowbit( )运算

    --------开始-------- lowbit (n) 定义为非负整数n在二进制表示下“最低位的1及其后面所有的0构成的数值. 比如: n = 10 的二进制下为1010,则lowbit (n) ...

  3. HDU1043 Eight

    题目: 简单介绍一下八数码问题:        在一个3×3的九宫格上,填有1~8八个数字,空余一个位置,例如下图: 1 2 3 4 5 6 7 8           在上图中,由于右下角位置是空的 ...

  4. B - Link/Cut Tree

    Problem description Programmer Rostislav got seriously interested in the Link/Cut Tree data structur ...

  5. SQLServer 使用变量动态行转列

    drop table #testcreate table #test(    id int identity(1,1) primary key,    bizDate varchar(50),    ...

  6. Linux的那点事

    1.重启nginx服务器 注意,修改了nginx配置文件后最好先检查一下修改过的配置文件是否正确,以免重启后Nginx出现错误影响服务器稳定运行. 判断Nginx配置是否正确命令如下: nginx - ...

  7. for 循环练习题

    X3 * 6528 = 3X * 8256X为一个数字 填入一个数字 使等式成立 for (var x=1;x<=9&&x>0;x++) { if ((x*10+3)*65 ...

  8. 【SQL】字符型函数

    1. ASCII ASCII(American Standard Code for Information Interchange,美国信息交换标准代码)是基于拉丁字母的一套电脑编码系统. 1) 返回 ...

  9. 多种效果进度指示层效果iOS源码项目

    该源码是一个多种效果进度指示层效果源码案例,源码KVNProgress,KVNProgress提供多种效果的进度指示层,有半透明效果,也支持全屏显示.指示层还高度支持自定义,可以按自己的需求定制.效果 ...

  10. OpenCV:OpenCV目标检测Hog+SWindow源代码分析

    参考文章:OpenCV中的HOG+SVM物体分类 此文主要描述出HOG分类的调用堆栈. 使用OpenCV作图像检测, 使用HOG检测过程,其中一部分源代码如下: 1.HOG 检测底层栈的检测计算代码: ...