Не работает получение данных с сервера graphql с помощью ApolloClient. Как я могу это исправить?
Здесь я создаю новый ApolloClient с помощью graphql.
import { ApolloClient, InMemoryCache } from "@apollo/client"
const client = new ApolloClient({
uri: "http://localhost:4000/graphql",
cache: new InMemoryCache()
})
export default client
Затем я создаю контекст ApolloProvider
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {ApolloProvider} from "@apollo/client"
import client from "./common/apollo-client"
import { Provider } from 'react-redux';
import store from "./redux/index"
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<ApolloProvider client = {client}>
<Provider store = {store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
</ApolloProvider>,
document.getElementById('root')
);
Здесь тот же запрос в коде
import { gql, useQuery } from "@apollo/client"
const GET_CATEGORIES = gql`
{
categories {
name
}
}
`
export default function useGetCategories() {
const {data} = useQuery(GET_CATEGORIES)
return data
}
Затем я пытаюсь использовать этот хук в функциональном компоненте, но он регистрирует UNDEFINED
export default function Mainpage() {
const categories = useGetCategories()
console.info(categories)
return (
<Header />
)
}
Я попытался перезапустить бэкэнд на локальном хосте: 4000, но это не помогло. Что я могу с этим поделать?
Ответы 1
проблема в том, что вы используете customHook, и это обещание для graphql, что он делает, это возвращает экземпляр этой текущей среды выполнения, и в то время он не определен, все, что вы можете сделать, это просто использовать в компоненте, который вы хотите использовать, почему вы усложняете вещи.
export default function Mainpage() {
const {loading,data,error} = useQuery(GET_CATEGORIES)
// first data will be undefined and when the promise resolved it will console data
console.info(data,{data})
console.info(loading,{loading})
console.info(error,{error})
return (
<Header />
)
}
но если вы все еще хотите использовать customHook для графика, вы можете сделать это следующим образом.
const [getCategories] = useLazyQuery(
GET_CATEGORIES
);
const [data, setData] = useState()
useEffect(async() => {
try {
const res = await getCategories()
setData(res)
} catch (err) {
console.info('error: ', err)
}
}, [])
return data
useQuery простой до тех пор, пока или если ваш компонент не имеет много логики, связанной с data, тогда вы перемещаете свою логику в customHook и выполняете всю логику там, но в этом случае используйте ее в компоненте, потому что я не видел какой-либо сложной логики, которая расширит ваш компонентная строка кода.
Можете порекомендовать, что лучше? Что лучше в продакшене, например, использовать пользовательский хук или просто использовать запрос в компоненте в этой ситуации?