首頁猿問如何使用 React...

如何使用 React apollo-client 緩存搜索數組？

JavaScript

郎朗坤 2022-07-15 09:32:20

我有一個簡單的搜索組件和 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 復制元素并且永遠不會被修改，但是這并沒有按預期工作。任何幫助深表感謝。

查看完整描述

1 回答

收到一只叮咚

TA貢獻1821條經驗獲得超5個贊

您應該能夠使用useState鉤子來完成此操作。這個例子對我有用：

import React, { useState, useEffect } from 'react';

import gql from 'graphql-tag';

import { useQuery } from '@apollo/react-hooks'

const QUERY_GET_ELEMENTS = gql`

{

elements {

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..."

{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);

});

反對回復 2022-07-15

1 回答
0 關注
100 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用 React apollo-client 緩存搜索數組？

如何使用 React apollo-client 緩存搜索數組？

1 回答

添加回答