我如何使用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);
});