我正在学习Apollo并做出反应。我正在尝试编写一个小样，仅输入名称并在下面呈现它。所有数据都是通过Apollo服务器进行查询和变异的。
现在Apollo服务器正常工作了。但是，无论何时输入新名称，都必须刷新页面。 enter image description here 我应该在react中设置状态，但是我不知道如何在react中正确设置状态。
这是代码：
adbkey.pub
App.js import React, { useState } from 'react';
import './App.css';
import ShowChannel from './ShowChannel';
import AddChannel from './AddChannel';
function App() {
return (
<div>
<AddChannel></AddChannel>
<ShowChannel></ShowChannel>
</div>
);
}
export default App;
ShowChannel.js import React, { useState } from 'react'
import { useQuery } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';
const QUERY_CLIENT = gql`
query {
channels {
id
name
}
}
`;
export default function ShowChannel() {
const { loading, error, data } = useQuery(QUERY_CLIENT);
if (loading) return 'Loading...';
if (error) return `Error! ${error.message}`;
return (
<div>
<ul>
{
data.channels.map((channel) => (
<li key={channel.id}> {channel.id}: {channel.name}</li>
))
}
</ul>
</div>
)
}
AddChannel.js答案 0 :(得分：0)
有几种方法可以使数据和UI保持同步。
突变后致电refetch。阅读更多here
使用update中的useMutation个道具在突变后更新缓存。阅读更多here
使用Subscription在跨平台上保持数据同步。