useQuery with useEffect for simple search - reactjs

Question

I have a pretty complicated component and now I am trying to implement a search where the user can type and it filters the results.
// query
const GET_ACCOUNTS = gql`
query accounts{
accounts{
id
name
status
company{
id
name
}
}
}
`;
// get query
const { loading } = useQuery(GET_ACCOUNTS, {
fetchPolicy: "no-cache",
skip: userType !== 'OS_ADMIN',
onCompleted: setSearchResults
});
// example of query result (more than 1)
{
"accounts": [
{
"id": "5deed7df947204960f286010",
"name": "Acme Test Account",
"status": "active",
"company": {
"id": "5de84532ce5373afe23a05c8",
"name": "Acme Inc.",
"__typename": "Company"
},
"__typename": "Account"
},
]
}
// states
const [searchTerm, setSearchTerm] = useState('');
const [searchResults, setSearchResults] = useState([]);
// code to render
<FormControl fullWidth>
<InputLabel htmlFor="seach">Search for accounts</InputLabel>
<Input
id="search"
aria-describedby="Search for accounts"
startAdornment={<InputAdornment position="start"><SearchIcon /></InputAdornment>}
value={searchTerm}
onChange={handleChange}
/>
</FormControl>
{searchResults && searchResults.accounts &&
searchResults.accounts.map(c => {
return (
<>
<ListItem
dense
button
className={classnames({ [classes.selectedAccountContext]: c.id === accountContextId })}
key={c.id}
onClick={() => accountClicked(c.id)}
>
<ListItemText
primary={c.name}
secondary={
<>
<span>{c.company.name}</span>
<span className="d-flex align-items-center top-margin-tiny">
<Badge
color={c.status === 'active' ? "success" : "danger"}
style={{ marginBottom: 0 }}
>
{c.status.replace(/^\w/, c => c.toUpperCase())}
</Badge>
<span className='ml-auto'>
<SvgIcon><path d={mdiMapMarkerRadius} /></SvgIcon>
<SMARTCompanyIcon />
</span>
</span>
</>
}
/>
</ListItem>
</>
)
})
}
// useEffect
useEffect(() => {
if (searchTerm) {
const results = searchResults.accounts.filter((c => c.name.toLowerCase().includes(searchTerm)))
setSearchResults(results)
}
}, [searchTerm])
The issue is when I start typing in my search field, I am looking at my searchResults and it gets filtered when I type in one character, but when I type the next one it breaks.
TypeError: Cannot read property 'filter' of undefined
Also it does not render on the view even when I have typed one letter.

Answer 1

Based on your data, the initial value of searchResults is a dictionary with accounts key. But when you update it in the useEffect part, it changes to a list:
useEffect(() => {
if (searchTerm) {
const results = searchResults.accounts.filter((c => c.name.toLowerCase().includes(searchTerm)))
// This changes the value of searchResults to an array
setSearchResults(results)
}
}, [searchTerm])
When the setSearchResults was called inside the useEffect, the value of searchResults changes from an object to an array:
from this:
searchResults = {
accounts: [
...
]
}
to this:
searchResults = [
...
]
That is why it raises TypeError: Cannot read property 'filter' of undefined after the first search since there is no accounts key anymore.
To fix this, you need to be consistent in the data type of your searchResults, it would be better to make it as a List in the first place. You can do this in the onCompleted part:
const { loading } = useQuery(GET_ACCOUNTS, {
fetchPolicy: "no-cache",
skip: userType !== 'OS_ADMIN',
onCompleted: (data) => setSearchResults(data.accounts || [])
});
Notice that we set searchResults to the accounts value. After that, you also need the way on how you access searchResults
{searchResults &&
searchResults.map(c => {
return (
...renderhere
)
})
}
And your useEffect will be like this:
useEffect(() => {
if (searchTerm) {
const results = searchResults.filter((c => c.name.toLowerCase().includes(searchTerm)))
setSearchResults(results)
}
}, [searchTerm])
TIP:
You may want to rename your searchResults into accounts to make it clearer. Take note also that after the first search, your options will become limited to the previous search result, so you may also want to store all of the accounts in a different variable:
const [allAccounts, setAllAccounts] = useState([])
const [searchedAccounts, setSearchedAccounts] = useState([])
// useQuery
const { loading } = useQuery(GET_ACCOUNTS, {
fetchPolicy: "no-cache",
skip: userType !== 'OS_ADMIN',
onCompleted: (data) => {
setAllAccounts(data.accounts || [])
setSearchedAccounts(data.accounts || [])
}
});
// useEffect
useEffect(() => {
if (searchTerm) {
// Notice we always search from allAccounts
const results = allAccounts.filter((c => c.name.toLowerCase().includes(searchTerm)))
setSearchedAccounts(results)
}
}, [searchTerm])