useMutation 修改后台数据,并且更新前端视图
修改了数据之后,Apollo 会根据ID自动更新视图,所以修改数据不需要手动改变本地缓存,删除,或者添加数据需要修改本地缓存或者改变了多个数据也需要修改本地缓存
import React from "react";
import {
render } from "react-dom";
import {
ApolloClient } from "apollo-client";
import {
ApolloProvider, useQuery, useMutation } from "@apollo/react-hooks";
import {
HttpLink } from "apollo-link-http";
import {
InMemoryCache } from "apollo-cache-inmemory";
import gql from "graphql-tag";
const client = new ApolloClient({
link: new HttpLink({
uri: "https://plp0mopxq.sse.codesandbox.io/"
}),
cache: new InMemoryCache()
});
const GET_TODOS = gql`
{
todos {
id
type
}
}
`;
const UPDATE_TODO = gql`
mutation UpdateTodo($id: String!, $type: String!) {
updateTodo(id: $id, type: $type) {
id
type
}
}
`;
function Todos