Apollo useMutation 添加数据,改变数据

本文介绍如何使用Apollo的useMutation钩子来修改后台数据,同时自动更新前端视图。通过useMutation,无需手动管理本地缓存,Apollo会依据数据ID自动刷新视图。对于添加、删除或批量修改数据的情况,理解如何正确操作本地缓存至关重要。
摘要由CSDN通过智能技术生成

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
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值