React js search doesn’t work on graphql pagination

I created a search function using react js to filter a table of data fetched from graphql endpoint
code :

const SearchRes = () => {
    let filtredRes = data.Orders.edges
        .filter(item => item.node.shippingAddress.name === (query));

    let res = filtredRes.length === 0 ? data.Orders.edges : filtredRes;                                         
    return res;
}

then t just do the following to get the data :

SearchRes.map(...)

this works fine and i could do the search but when i implemented graphql pagination , the search stopped working on the results , it only works before clicking a button to get more results

code :

import React, { useState, useEffect } from 'react'
import { gql, useQuery } from '@apollo/client';
import Table  from 'react-bootstrap/Table'
import Moment from 'react-moment';
import moment from "moment";
import { Link } from 'react-router-dom';
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import { DangerousChangeType } from 'graphql';
import Search from './Search'
import Button from 'react-bootstrap/Button'

const GET_All_Orders = gql`
query Orders($input1: PaginationInput) {
    Orders(input: $input1){
     pageInfo {
       hasNextPage
       hasPreviousPage
     }
     edges{
       cursor
       node {
          id
          closed
          email
          createdAt
          updatedAt
          cancelledAt
          displayFinancialStatus
          displayFulfillmentStatus
          lineItems{
            edges{
              node {
                customAttributes{
                  key
                  value
                }
                id
                quantity
                title
                variant{
                  id
                  image {
                    altText
                    id
                    src
                  }
                  title
                  weight
                  weightUnit
                  price
                }
              }
            }
          }
          shippingAddress { 
            name
          }
         phone
         subtotalPrice
         totalPrice
         totalRefunded
         totalTax
         processedAt
       }
     }
   }
 }
`;


export default function AllOrders({ input1 }) {
    const { loading, error, data  , fetchMore} = useQuery(
        GET_All_Orders,
        {
            variables: {
                "input1": {
                    "num": 20,
                }
            },
        }
    );
    let date = new Date();
    const [query, setQuery] = useState('');

    if (loading) return <h4>読み込み中...</h4>;
    if (error) return `Error! ${error}`;
    
    const SearchRes = () => {
        let filtredRes = data.Orders.edges
            .filter(
                item => (
                    item.node.shippingAddress.name === (query) ||
                    item.node.email === (query)
                )
            );                                     
        let res = filtredRes.length === 0 ? data.Orders.edges : filtredRes;                                      
        return res;
    }

    return (
        <div>
           <Row > 
    <Col xs={10}> <h5>すべての注文</h5></Col>
    <Col><h5>  日付 : <Moment format="YYYY/MM/DD">
     
 { date}
            </Moment> </h5></Col>
  </Row>
   
 <br/>
 <Search getQuery={(q) => setQuery(q)} />
 <br/>
 <Table responsive hover size="sm">
  <thead>
    <tr>
    
    <th className="allOrders">注文日</th>
    <th className="allOrders">名前</th>
    <th className="allOrders">注文者メールアドレス</th>
    <th className="allOrders" >配送状態</th>
    <th className="allOrders" >支払状況</th>
      <th className="allOrders" >合計金額</th>
      <th className="allOrders" >詳細</th>
 
    </tr>
  </thead>
  <tbody>
 {SearchRes().map(({ edges ,node :{id , createdAt , displayFulfillmentStatus , displayFinancialStatus , totalPrice , email , shippingAddress: { 
            name
          } }}) => (
    
    
    <tr key={id}>
      
  
      <td>    <Moment format="YYYY/MM/DD">
       {createdAt}
            </Moment></td>
            <td>{ name} </td>  
      <td>{ email} </td>

      {displayFulfillmentStatus == "FULFILLED" ? <td className="success">配送済み</td> :  <td className="failed">未配送</td>}
    
 
 
 
       
      {displayFinancialStatus == "PAID" ? <td>支払済み</td> : <td>未払い</td> }
      <td>{totalPrice} </td>
      <td>  
      <Link to={`/orders/${id}`} className="btn btn-light">
      詳細
          </Link></td>
   
    </tr>
    
    

  ))}
  </tbody>
</Table>
    
            {/* button responsible for the pagination */}
            <div className="text-center">
                <Button
                    variant="light"
                    onClick={() => {
                        fetchMore({
                            variables: {
                                "input1": {
                                    "num": 20,
                                    "cursor": data.Orders.edges[data.Orders.edges.length - 1].cursor
                                }
                            },
                            updateQuery: (prevResult, { fetchMoreResult }) => {
                                fetchMoreResult.Orders.edges = [
                                    ...prevResult.Orders.edges,
                                    ...fetchMoreResult.Orders.edges
                                ];
                                return fetchMoreResult;
                            }
                        });
                    }}
                >
                    もっと
                </Button>
            </div>
        </div>
    );
}

maybe the issue is :

1 ) i think the problem is because the button fetch a different table maybe that’s why the function doesn’t search it .

  1. maybe because of the num variable because it is like the first parameter in graphql , you should specify how many result you should get so when i write "num": 20 in the button it will always return the first 20 result not the results after the cursor

13 thoughts on “React js search doesn’t work on graphql pagination”

Leave a Comment