如何使用 React apollo-client 缓存搜索数组？

Question

我有一个简单的搜索组件和 handleSearch 功能：  const { data, loading, error } = useQuery(QUERY_GET_ELEMENTS);  const client = useApolloClient();   <input     onChange={handleSearch}     placeholder="&#128270;  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 复制元素并且永远不会被修改，但是这并没有按预期工作。任何帮助深表感谢。

Answer 1

您应该能够使用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="&#128270;  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);

});