useQuery in apollo client returns undefined - reactjs

Question

I'm using apollo client in my Reactjs application along with Redux. I'm fetching client details from mongodb by authenticating via JWT token. For this I have used useLazy Query. When user starts typing in the autocomplete box, There would be an authetication going on behind the screen and fetches the client details once the authentication is successful. However, I have a filter condition ,in which, I want to load the countries without any event so I used useQuery. But the results are not fetching in the beginning itself. It works when I use "useQuery" as well as "useLazyQuery" for the same (FIND_COUNTRY)
import * as React from "react"
import TextField from "#mui/material/TextField"
import Autocomplete from "#mui/material/Autocomplete"
import parse from "autosuggest-highlight/parse"
import match from "autosuggest-highlight/match"
import { FIND_CLIENT_NAME, FIND_COUNTRY,CLIENT_AUTOCOMPLETE } from "../graphql-operations"
import { useLazyQuery, useQuery } from "#apollo/client"
import Button from "#mui/material/Button"
import SearchIcon from "#mui/icons-material/Search"
import FilterAltTwoToneIcon from "#mui/icons-material/FilterAltTwoTone"
import { Grid, Stack } from "#mui/material"
import { Container } from "#mui/system"
import AccordionDetails from "#mui/material/AccordionDetails"
import Chip from "#mui/material/Chip"
import { useDispatch } from "react-redux"
import { useMsal } from "#azure/msal-react"
import { loginRequest } from "../authConfig"
import { fetchUsersToken } from "../userSlice"
import { useEffect } from "react"
import ClientListing from "./ClientListing"
import { store } from "../store"
import { useState } from "react"
//Country Filter ------------------------------------------
function Filter(country, setCountry, countryArray, setSearchResults) {
return (
<center>
<AccordionDetails sx={{ maxWidth: 800, height: "auto", minWidth: 240 }}>
<div>
<Autocomplete
data-testid="filter"
size="small"
multiple
id="fixed-tags-demo"
freeSolo
value={country}
onChange={(event, newValue) => {
setCountry([...newValue])
setSearchResults(false)
}}
options={countryArray}
getOptionLabel={option => option.country}
renderTags={(tagValue, getTagProps) =>
tagValue.map((option, index) => (
<Chip
size="small"
key={option.countryCode}
label={option.country}
{...getTagProps({ index })}
/>
))
}
style={{ maxwidth: 350, margin: 0, minWidth: 80 }}
renderInput={params => (
<TextField
data-testid="filter-text"
{...params}
label="Country"
variant="filled"
placeholder="Add Country"
/>
)}
/>
</div>
</AccordionDetails>
</center>
)
}
//------------------------------------------------------
export default function LandingPage() {
const [clients, setClients] = React.useState([]) //stores data for autocomplete search from useLazyQuery.
const [filterFlag, setFilterFlag] = React.useState(false)// flag for filter open/close.
const [inputValue, setInputValue] = React.useState("")// stores input value for client search autocomplete.
const [country, setCountry] = React.useState([])//stores country chosen by user.
const [searchResults, setSearchResults] = React.useState(false)//Flag to enable submit after autocomplete onChange complete.
const [SearchInput, setSearchInput] = React.useState()//setting client search value for pagination on submit.
const [SearchCountry, setSearchCountry] = React.useState([])//setting country filter search value for pagination on submit.
const [renderPagination, setRenderPagination] = React.useState(false)//Flag to render pagination table and disable banner image.
//useQuery to load country values for filter country autocomplete----------------------------------------
  var countryArray = []
  var sorted = []
  const { loading: loadingCountry, data: countryData } = useQuery(FIND_COUNTRY)
  if (loadingCountry) <p>Loading..</p>
  if (countryData != undefined) {
    sorted = [...countryData.getCountries.data].sort((a, b) =>
    {
      if(a.country !== null)
        return a.country.localeCompare(b.country)}
    )
    sorted.map(countryData => {
      if (countryData.country) countryArray.push(countryData)
    })
console.log("Fetched Countried from UseQuery \n ", countryData);
  }
//Redux begins here to acquire token from reducer
const { accounts } = useMsal();
const request = {
...loginRequest,
account: accounts[0]
}
store.dispatch(fetchUsersToken(request))
//Redux ends here
//useLazyQuery to load client Name values for client search autocomplete----------------------------------------
var tempStorage = []
const [clientSearch, { data, loading: loadingQuery }] = useLazyQuery(CLIENT_AUTOCOMPLETE)
async function handleSearch(inputValue) {
//Dispatch action to get access token and store it in RTK (Redux-ToolKit)
try {
if (inputValue) {
const input = inputValue
const clientData = await clientSearch({
variables: { input },
})
clientData.data.autocompleteClient.data.map(({ name }) => {
tempStorage.push({ name })
})
setClients([...tempStorage])
}
} catch (error) {
console.log(error)
}
}
const [getCountryData, { loading, dataTask }] = useLazyQuery(FIND_COUNTRY);
async function filterOpenClose() {
getCountryData().then((fetchedData) => {
sorted = [...fetchedData.data.getCountries.data].sort((a, b) =>
{
if(a.country !== null)
return a.country.localeCompare(b.country)}
)
sorted.map(countryData => {
if (countryData.country) countryArray.push(countryData)
})
})
setFilterFlag(!filterFlag)
setSearchResults(false)
}
const handleSubmit = () => {
if (inputValue) {
setSearchResults(true)
setRenderPagination(true)
setSearchInput(inputValue)
setSearchCountry(country)
}
}
return (
<>
{!renderPagination && <div className="banner-image" role="image" />}
<div>
<br />
<center>
<Container>
<Grid
container
spacing={2}
direction="row"
justifyContent="center"
alignItems="center"
>
<Grid item xs={12} md={12} lg={9}>
<Autocomplete
data-testid="Autocomplete-search"
size="small"
clearOnBlur={false}
id="highlights-demo"
options={clients}
getOptionLabel={option => option.name}
renderInput={params => (
<TextField
sx={{ maxWidth: 775, marginRight: 0 }}
{...params}
placeholder="Search by Client Name/ Client ID /DUNS Number"
margin="normal"
onChange={event => {
handleSearch(event.target.value)
setInputValue(event.target.value)
setSearchResults(false)
}}
onSelect={val => {
setInputValue(val.target.value)
}}
/>
)}
renderOption={(props, option, { inputValue }) => {
const matches = match(option.name, inputValue, {
insideWords: true,
})
const parts = parse(option.name, matches)
return (
<li {...props}>
<div>
{parts.map((part, index) => (
<span
key={index}
style={{
fontWeight: part.highlight ? 700 : 400,
}}
>
{part.text}
</span>
))}
</div>
</li>
)
}}
/>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<Stack direction="row" spacing={1}>
<Button
data-testid="button"
variant="contained"
startIcon={<SearchIcon />}
className="primary-btn"
onClick={handleSubmit}
>
Search
</Button>
<Button
data-testid="filter-icon"
variant="contained"
startIcon={<FilterAltTwoToneIcon />}
className="primary-btn"
onClick={filterOpenClose}
>
Filter
</Button>
</Stack>
</Grid>
</Grid>
</Container>
</center>
{/* renders filter component */}
{filterFlag && Filter(country, setCountry, countryArray, setSearchResults)}
{/* renders pagination table component */}
<br></br>
{renderPagination && (
<ClientListing
clientNameInput={SearchInput}
country={SearchCountry}
searchResults={searchResults}
/>
)}
</div>
<br></br>
</>
)
}
graphql_operations.js
import {gql} from '#apollo/client'
export const CLIENT_AUTOCOMPLETE = gql`
query clientAutocomplete($input: String) {
autocompleteClient(input: $input){
data{
name
}
Error{
Message
}
}
}
`;
export const FIND_COUNTRY = gql`
query {
getCountries{
data{
country
countryCode
}
Error{
Message
}
}
}
`;
export const FIND_CLIENT_NAME = gql`
query getclients($input: SearchQuery) {
searchClients(input: $input){
clients{
id
name
dunsNumberCode
dunsNameDesc
ultimateDunsNumber
ultimateDunsDesc
nationalId
clientAddress{
countryName
countryCode
addressLine1Desc
addressLine2Desc
cityName
postalCode
}
clientIndustry{
industrySectorName
}
}
totalDocsReturned
}
}
`;
export const FIND_CLIENT_ENGAGEMENT = gql`
query getclients($input: SearchQuery) {
searchClients(input: $input){
clients{
id
name
dunsNumberCode
dunsNameDesc
ultimateDunsNumber
ultimateDunsDesc
nationalId
clientAddress{
countryName
countryCode
addressLine1Desc
addressLine2Desc
cityName
postalCode
}
clientIndustry{
industrySectorName
}
engagements{
data{
id
name
clientId
clientName
engagementStatusCode
companyName
companyCode
}
Error{
Message}
}
}
totalDocsReturned
Error{
Message
}
}
}
`;
In the filterOpenClose method, I have useLazyQuery for FIND_COUNTRY and in the beginnning of the component I have used useQuery. I'm getting the country details if and only if I keep both the snippet on.If I remove useLazyQuery for FIND_COUNTRY its not giving me the results. Its undefined. Because of redux, this problem occurs?