Как создать оболочку для запроса Apollo, использующего ловушки React - PullRequest
Новая
       0

Как создать оболочку для запроса Apollo, использующего ловушки React

0 голосов
/ 01 ноября 2019

Чтобы выполнить запрос с помощью Apollo, вы можете сделать это с помощью рендеринга реквизита или hooks .

https://www.apollographql.com/docs/react/data/queries/

В зависимости от того, используете ли вы компонент класса или функциональный компонент.

В этих примерах вы должны обрабатывать состояние загрузки и ошибки, например, 

const { loading, error, data } = useQuery(GET_DOGS);

if (loading) return 'Loading...';
if (error) return `Error! ${error.message}`;

Такое ощущение, что через некоторое время это будет повторяться каждый раз, когда я хочу сделать запрос. Итак, я хотел сделать обертку для него.

Итак, я нашел один пост о том, как сделать это для компонента: https://medium.com/naresh-bhatia/graphql-concepts-i-wish-someone-explained-to-me-a-year-ago-959b234ff430

Но, не смог найтиответ для функционального способа.

Я попробовал решение, и оно работает, но я не знаю, хорошее ли это решение.

Итак, я создал функциональный компонент React, который долженвыполнить загрузку и обработку ошибок, а затем вернуть данные. 

export function GraphQLRequest({ requestFunction, params, handleData }) {
    if (typeof requestFunction !== 'function') {
        return <ErrorAlert message={'Request function is not a function'} />
    }

    const { loading, error, data } = requestFunction(...params)

    if (loading) {
        return <div>Loading...</div> // TODO; loading spinner
    }
    if (error) {
        return <ErrorAlert message={error.message} />
    }

    handleData(data)
    return <div></div>
}

А из другого компонента я могу поместить свой GraphQLRequest компонент в часть рендеринга: 

export function SomeView({ match: { params } }) {
    const [data, setData] = useState(null)

    const id = params.someId

    return (<div>
        <p className='title'>SomeItem {id}</p>
        <GraphQLRequest 
            handleData={data => setData(data)}
            requestFunction={getSomeInfoFromId}
            params={[id]}
        />
    </div>)
}

Он работает нормально. Но мне немного не по себе из-за наличия пустого компонента, который просто выполняет выборку данных. Правильно ли я чувствую себя ненадежным? Или мне просто продолжать?

...