Как использовать компонент React со своим собственным фрагментом graphql, когда api возвращает массив? - PullRequest
Новая
       98

Как использовать компонент React со своим собственным фрагментом graphql, когда api возвращает массив?

0 голосов
/ 26 мая 2020

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

const Product = ({detail}) => {

  const data = useFragment(
    graphql`
        fragment Product_detail on Product {
            title
            detail
        }
    `,
    detail
  )

  return (
     <div>
       <h1>{data.title}</h1>
       <p>{data.detail}</p>
     </div>
}

И он использует его внутри родительского компонента, который выглядит следующим образом: 

const Page1 = ({content}) => {

  const data = useFragment(
    graphql`
        fragment Page1_content on Page1Info {
            oneProduct {
              ...Product_detail
            }
        }
    `,
    detail
  )

  return <Product detail={data.oneProduct}/>
}

Как я могу повторно использовать компонент Product на другой странице, где родительский фрагмент graphql возвращает массив продуктов, а не только один продукт? 

const Page2 = ({content}) => {

  const data = useFragment(
    graphql`
        fragment Page2_content on Page2Info {
            allProducts { //returns an array of products
              title
              ...Product_detail
            }
        }
    `,
    detail
  )

  return (
    <div>
       {data.allProducts.map(product => <button>{product.name}</button>)}

       {*/Display the product detail of the product who's button is clicked*/}
       <Product detail={data.allProducts}/>
    </div>
}

Я использую Relay в качестве своего клиента graphql. Но я предполагаю, что принципал одинаков для всех клиентов?

...