javascript - 如何使用 React apollo-client 缓存搜索数组?
问题描述
我有一个简单的搜索组件和 handleSearch 功能:
const { data, loading, error } = useQuery(QUERY_GET_ELEMENTS);
const client = useApolloClient();
<input
onChange={handleSearch}
placeholder="🔎 Search..."
/>
function handleSearch(e) {
const { value } = e.target;
const matchingElements = data.filter(({ name }) =>
name.toLowerCase().includes(value.toLowerCase())
);
client.writeData({
data: {
elements: matchingElements
}
});
}
// rendering the elements looks something like this:
data.elements.map(el => <div>{el.name}</div>
数据来自一个 useQuery 钩子。
问题是搜索只在一个方向上起作用,因为一旦过滤了元素,我就会丢失原始列表。我需要保留所有可以过滤的元素的存储,并在保留原始列表的同时仅渲染过滤后的元素。
我正在使用 apollo 进行状态管理,但似乎无法使其正常工作。我的第一个想法是使用 client.writeData 复制元素并且永远不会被修改,但是这并没有按预期工作。
任何帮助深表感谢。
解决方案
您应该能够使用useState
钩子来完成此操作。这个例子对我有用:
import React, { useState, useEffect } from 'react';
import gql from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks'
const QUERY_GET_ELEMENTS = gql`
{
elements {
id
name
}
}
`;
export default function Test() {
const [isDisplayDataSet, setIsDisplayDataSet] = useState(false);
const [displayData, setDisplayData] = useState([]);
const { data, loading, error } = useQuery(QUERY_GET_ELEMENTS);
useEffect(() => {
if (!loading && !isDisplayDataSet) {
setDisplayData(data.elements);
setIsDisplayDataSet(true);
}
}, [isDisplayDataSet, displayData, data, loading])
function handleSearch(e) {
const { value } = e.target;
const matchingElements = data.elements.filter(({ name }) =>
name.toLowerCase().includes(value.toLowerCase())
);
setDisplayData(matchingElements);
}
if (error) {
console.error(error);
return <h1>There was an error</h1>
}
if (isDisplayDataSet) {
return (
<>
<input
className="form-control mb-3"
onChange={handleSearch}
placeholder="🔎 Search..."
/>
<ul className="list-group">
{displayData.map(el => <li className="list-group-item" key={el.id}>{el.name}</li>)}
</ul>
</>
);
} else {
return '';
}
}
我为样式添加了一些引导类:)
这是我设置的快速而肮脏的阿波罗服务器,用于加载一些数据:
const { ApolloServer } = require('apollo-server');
const gql = require('graphql-tag');
const fetch = require('node-fetch');
const typeDefs = gql`
type Element {
id: ID!
name: String!
}
type Query {
elements: [Element]!
}
schema {
query: Query
}
`;
const resolvers = {
Query: {
async elements() {
const res = await fetch('https://reqres.in/api/users');
const { data } = await res.json();
const elements = data.map(({ id, first_name, last_name }) => ({ id, name: `${first_name} ${last_name}` }))
console.log('elements', elements);
return elements;
}
}
}
const server = new ApolloServer({
typeDefs,
resolvers
});
server.listen().then(({ url }) => {
console.log('server ready on ' + url);
});
推荐阅读
- python - 如何从熊猫数据框中收集具有特定日期的所有行?
- botframework - 异步提示用户
- jboss - 嵌入式 Undertow 日志输出
- python - 如何使用字符串变量的内容来引用字典中的“字符串定义”键?
- ios - ShazamKit:音乐检测“session.match(signature)”没有找到匹配并且没有抛出错误,很奇怪
- ios - 如何在 SwiftUI 中使用复数进行本地化
- vue.js - vuetify:如何更改 v-data-table 组件中的每页项目选择项目?
- redis - redis中获取和查询排序集,以及排序集键过期的解决方案
- reactjs - 在 Cloudformation 模板中引用 lambda 环境变量会引发“循环依赖”错误
- amazon-web-services - Amazon S3 - 是否可以限制用户扫描公共文件夹的文件夹?