CODEWITHSUNDEEP
reactjsnext.jsapollo-client
jameshwart lopez
jameshwart lopez

Reputation: 3161

Apollo Client useQuery always return loading as true

I have a react component that uses apollo client and uses useQuery to get information from the API. The problem I'm facing is the loading state of useQuery is always true. I've tried Adding fetchPolicy to no-cacheand notifyOnNetworkStatusChange to true but still doesn't work. I am sure the query is okay because I can get response using the graphql userinterface. Below is my code for the component

import { gql, useQuery } from '@apollo/client';
import {
    Box, Grid, Alert
} from '@mui/material';
import ChapterCardSkeleton from '@components/Chapter/ChapterCard/Skeleton'

const GET_SERIE_CHAPTERS = gql`the_query_here`

function ChapterListItems(props) {
    const serieSlug = props.serieSlug

    const { loading, error, data } = useQuery(GET_SERIE_CHAPTERS, {
        variables: {
            slug: serieSlug
        },
        fetchPolicy: "no-cache",
        notifyOnNetworkStatusChange: true,
    });

    const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

    if (loading) return (
        <Box sx={{ pt: 1, pb: 1 }}>
            <Grid container spacing={3}>
                {
                    numbers.map((number) => {
                        return (
                            <Grid key={number.toString()} item xs={6} sm={4} >
                                <ChapterCardSkeleton />
                            </Grid>
                        )
                    })
                }
            </Grid>
        </Box>
    )

    if (error) return (<Alert severity="error">Error! {error.message}</Alert>);

    return (
        <Box sx={{ pt: 1, pb: 1 }}>
            {JSON.stringify(data)}
        </Box>
    );
}

export default ChapterListItems

Can anyone help me fix this issue? Thanks

By the way below are my project dependencies

"dependencies": {
    "@apollo/client": "^3.5.10",
    "@emotion/react": "^11.8.1",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.4.4",
    "@mui/material": "^5.4.4",
    "graphql": "^16.3.0",
    "next": "12.1.0",
    "node-sass": "^7.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-timeago": "^6.2.1"
  }``

`

Upvotes: 1

Views: 3397

Answers (1)

Enfield Li
Enfield Li

Reputation: 2540

I never use wp service before, but the docs has this, maybe you can use fetch api to debug if the network work first, and it seems not to be an useQuery issue:

fetch('https://www.wpgraphql.com/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    query: `
        {
            generalSettings {
                url
            }
        }
    `,
  }),
})
  .then(res => res.json())
  .then(res => console.log(res.data))

Upvotes: 2

Related Questions