React connection with Strapi API call doesn't work correctly with React Query

Question

In the following code I use the plugin react-query to make an API call to strapi. When I open the application it doensn't work at first and I get the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'data')

When I comment, save, and then uncomment and save a certain piece of code the component does work.

Can someone please help me solve this problem, so that the component works immediately?

export const Alphabet = () => {
  const [value, setValue] = useState(0)

  const handleChange = (event: SyntheticEvent, newValue: number) => {
    setValue(newValue)
  }

 

  const allAttributes = '?populate=*'
  const wholeAlphabet = '?pagination[pageSize]=26'

  const {
    isLoading,
    error,
    data: glossaries,
  } = useQuery({
    queryKey: ['getAllGlossary'],
    queryFn: () =>
      axios
        .get(`http://localhost:1337/api/glossaries${allAttributes}`)
        .then(res => res.data),
  })

  const { data: alphabet } = useQuery({
    queryKey: ['getAlphabet'],
    queryFn: () =>
      axios
        .get(`http://localhost:1337/api/alphabets${wholeAlphabet}`)
        .then(res => res.data),
  })


// this following 4 lines is the part I have to comment and uncomment: 
  const glossaryList = glossaries.data
  const alphabetList = alphabet.data
  console.log(glossaryList)
  console.log(alphabetList)

  if (isLoading) return <Typography>Loading...</Typography>
  if (error instanceof Error)
    return <Typography>An error has occurred: {error.message}</Typography>


}