React Apollo - 여러 쿼리 만들기
다음과 같은 쿼리 파일이 있습니다.
import {gql} from 'react-apollo';
const queries = {
getApps: gql`
{
apps {
id
name
}
}
`,
getSubjects: gql`
{
subjects {
id
name
}
}
`
};
export default queries;
그런 다음 다음 다음 파일을 React 구성 요소로 가져옵니다.
import React, {Component} from 'react'
import queries from './queries'
class Test extends Component {
...
}
export default graphql(queries.getSubjects)(graphql(queries.getApps)(Test));
이렇게 하면 쿼리(getApp) 중 하나에 대한 데이터만 가져오고 둘 다 가져오지는 않습니다.이렇게 한 번에 하나씩 하면 다음과 같습니다.
export default graphql(queries.getSubjects)(Test);
작동하지만 다른 질문은 없습니다.네, 둘 다 따로 테스트해 봤는데 효과가 있어요.어떻게 하면 두 개의 쿼리가 모두 내 소품에 표시되도록 할 수 있을까요?
제가 선호하는 방법은compose아폴로 클라이언트(문서)의 기능.
편집: 쿼리가 여러 개 있는 경우 이름을 지정해야 합니다.
이 경우 다음과 같이 됩니다.
import React, {Component} from 'react'
import queries from './queries'
import { graphql, compose } from 'react-apollo';
class Test extends Component {
...
render() {
...
console.log(this.props.subjectsQuery, this.props.appsQuery); // should show both
...
}
}
export default compose(
graphql(queries.getSubjects, {
name: "subjectsQuery"
}),
graphql(queries.getApps, {
name: "appsQuery"
}),
)(Test);이러한 쿼리를 개별적으로 재사용하지 않으려면 두 쿼리를 하나로 결합하여 단일 요청을 작성하십시오.
const combinedQueries = gql`
{
apps {
id
name
}
subjects {
id
name
}
}
`
컴포넌트에서 사용할 수 있습니다.
import React, {Component} from 'react'
import combinedQueries from './combinedQueries'
class Test extends Component {
...
render() {
...
if(!this.props.combinedQueries.loading) {
console.log(this.props.combinedQueries.apps);
console.log(this.props.combinedQueries.subjects);
}
...
}
}
export default graphql(combinedQueries, {name: 'combinedQueries'})(Test);
IMHO는 가장 깔끔한 솔루션 중 하나로, Apollo Client React 구현에 설명되어 있습니다.
기본 개념은 쿼리를 중첩된 쿼리 구성 요소로 래핑하는 것입니다.닫힘 함수를 구성 요소 하위 항목으로 사용하면 한 쿼리의 결과를 다른 쿼리로 위임하는 등의 작업을 쉽게 수행할 수 있습니다.
const QueryOne = gql`
query One {
one
}
`;
const QueryTwo = gql`
query Two {
two
}
`;
const NumbersWithData = () => (
<Query query={QueryOne}>
{({ loading: loadingOne, data: { one } }) => (
<Query query={QueryTwo}>
{({ loading: loadingTwo, data: { two }}) => {
if (loadingOne || loadingTwo) return <span>loading...</span>
return <h3>{one} is less than {two}</h3>
}}
</Query>
)}
</Query>
);
리액트-어댑트를 사용해서 만들고 있어요정말 간단해서 코드를 깨끗하게 유지할 수 있어요.
간단한 예:
import { adopt } from 'react-adopt';
...
render() {
const Composed = adopt({
first: ({ render }) => <Query query={FIRST_QUERY}>{ render }</Query>,
second: ({ render }) => <Query query={SECOND_QUERY}>{ render }</Query>
});
return (
<Composed>
({ first, second }) => {
console.log('first', first)
console.log('second', second)
// validations (loading, error)
return (
<div>Your JSX</div>
)
}
</Composed>
)
}
...
를 사용하는 예는 많이 있습니다.
const Composed = adopt({
first: <Query query={FIRST_QUERY} />,
second: <Query query={SECOND_QUERY} />
});
에 주의해 주세요.<Query>컴포넌트. 자식이 필요합니다.그렇지 않으면 다음 오류가 발생합니다.
Warning: Failed prop type: The prop children is marked as required in Query, but its value is undefined.
이전 경고를 피하기 위해 가능한 해결책을 찾았습니다.
first: ({ render }) => <Query query={FIRST_QUERY}>{ render }</Query>
도움이 되길 바랍니다!
Apollo 2.x의 경우:react-adopt쿼리 및 돌연변이를 단일 레벨로 구성합니다(이 lib는 렌더링 소품(예를 들어 React Context API)을 가진 모든 컴포넌트를 구성합니다).
https://github.com/pedronauck/react-adopt
Apollo Client useQuery Hooks의 등장으로 모든 것이 바뀌었습니다.2020년 이후로는 아폴로 클라이언트 useQuery 훅을 사용하고 있을 것입니다.useQuery Hook은 두 쿼리를 모두 실행하는 횟수만큼 호출할 수 있습니다.useQuery hooks에 대한 자세한 내용은 공식 문서 https://www.apollographql.com/docs/react/data/queries/에서 확인할 수 있습니다. 저는 최근 프로젝트에서 매우 유용하다고 생각합니다.예
const queries = {
getApps: gql`
{
apps {
id
name
}
}
`,
getSubjects: gql`
{
subjects {
id
name
}
}
`
};
const { loading, error, data } = useQuery(queries);
const { loading:getSubjectsLoading, error:getSubjectsError, data:getSubjects } = useQuery(getSubjects);
if (loading || getSubjectsLoading) return "Loading...";
if (error || getSubjectsError ) return <p>Error :(</p>;
console.log(data);
console.log(getSubjects);
이 링크에 따르면compose()하다
1 - 다음을 사용하여 "포장" 패키지 설치npm i recompose
- 사용 - Import 법 2import { compose } from "recompose";
3- 다음 형태로 사용:
export default compose(
graphql(Query1, { alias: "Query1" }),
graphql(Query2, { alias: "Query2" })
)(Test);
매뉴얼 : https://www.apollographql.com/docs/react/api/react-apollo/
하나의 은 '이렇게 하다'를 입니다.props★★★★★★ 。
export default compose(
graphql(QUERY_2, {
props: ({ data }) => ({ ...data }),
}),
graphql(QUERY_1, {
props: ({ data }) => ({ ...data, myCustomAttribute: data.foo }),
}),
)(Component);
이 방법이 제 사용 사례에 좀 더 적합하다는 것을 알게 되었습니다.
다음은 문서 링크입니다.https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-config-props
아폴로에서 컴포트가 제거되었기 때문에 로다쉬라는 대체 라이브러리가 있습니다.{flowRight} 메서드는 compose와 동일한 방식으로 작동합니다.다음의 순서에 따릅니다.
npm i -s lodash
import {flowRight} from 'lodash'flowRight와 compose 사용법을 교환합니다.다른 모든 코드는 동일하게 동작합니다.
재귀적 반응 컴포넌트는 어떻습니까?
export const QueriesExecutor = ({
children,
queries,
variables,
loading = false,
...rest
}) => {
const lastQueryIndex = queries.length - 1;
const {data, loading: _loading} = useQuery(
queries[lastQueryIndex].query,
{
variables
}
);
if (queries.length > 1) {
return (
<QueriesExecutor
children={children}
queries={queries.slice(0, lastQueryIndex)}
variables={variables}
loading={_loading}
{...rest}
{...data}
/>
);
}
if (loading || _loading) return 'Loading...';
return React.Children.only(
React.cloneElement(children, {
...rest,
...data
})
);
};
- 쿼리: 병렬로 실행하는 쿼리 배열
- 베이스 케이스: 쿼리 1개 남았습니다.아이를 렌더링해야 합니다.
- ...rest: 이전 쿼리에서 쿼리 데이터를 수집하는 데 사용됨하위 항목에 도달할 때까지 실행자
const { loading: cat_loading, cat_error, data: cat_data } = useQuery(categoriesAllQuery)
const { loading: prod_loading, prod_error, data: prod_data } = useQuery(productsAllQuery)
if (cat_loading || prod_loading) return <p>Loading ... </p>
const { categoriesAll } = cat_data
const { productsAll } = prod_data
언급URL : https://stackoverflow.com/questions/43380704/react-apollo-make-multiple-queries
'programing' 카테고리의 다른 글
| Angular UI 라우터를 사용하여 기본 하위 보기를 설정하는 방법 (0) | 2023.03.31 |
|---|---|
| WooCommerce Storefront 테마에서 브레드 크러쉬 제거 (0) | 2023.03.31 |
| WordPress get_template_part pass 변수 (0) | 2023.03.31 |
| WP에서 업로드된 미디어를 어떻게 구성합니까? (0) | 2023.03.31 |
| 리액트 후크를 사용한 componentDidUpdate와 동등 (0) | 2023.03.31 |