第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會有你想問的

如何使用 React apollo-client 緩存搜索數(shù)組?

如何使用 React apollo-client 緩存搜索數(shù)組?

郎朗坤 2022-07-15 09:32:20
我有一個(gè)簡單的搜索組件和 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>數(shù)據(jù)來自一個(gè) useQuery 鉤子。問題是搜索只在一個(gè)方向上起作用,因?yàn)橐坏┻^濾了元素,我就會丟失原始列表。我需要保留所有可以過濾的元素的存儲,并在保留原始列表的同時(shí)僅渲染過濾后的元素。我正在使用 apollo 進(jìn)行狀態(tài)管理,但似乎無法使其正常工作。我的第一個(gè)想法是使用 client.writeData 復(fù)制元素并且永遠(yuǎn)不會被修改,但是這并沒有按預(yù)期工作。任何幫助深表感謝。
查看完整描述

1 回答

?
收到一只叮咚

TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超5個(gè)贊

您應(yīng)該能夠使用useState鉤子來完成此操作。這個(gè)例子對我有用:


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 '';

    }

}

我為樣式添加了一些引導(dǎo)類:)


這是我設(shè)置的快速而骯臟的阿波羅服務(wù)器,用于加載一些數(shù)據(jù):


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

});


查看完整回答
反對 回復(fù) 2022-07-15
  • 1 回答
  • 0 關(guān)注
  • 115 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號