如何将 Github GraphQL API 提交响应映射到 react-bootstrap 卡片？

Question

以下所有代码都在名为 CommitCards 的自定义组件中。

使用 React Apollo.

给出以下 gql 查询

const GET_REPO_COMMITS = gql`
query GetRepoCommits($repoName: String!) {
  repository(name: $repoName, owner: "FernandoH-G") {
    defaultBranchRef {
      target {
        ... on Commit {
          history(first: 5) {
            edges {
              node {
                pushedDate
                message
                url
              }
            }
          }
        }
      }
    }
  }
}
`;

const repoName = props.rName
    const { loading, error, data } = useQuery(GET_REPO_COMMITS, {
        variables: { repoName },
    });
    if (loading) return (
        <p>Loading...</p>
    );
    if (error) return (
        <p>Error.</p>
    );

我能够从属于给定所有者的给定存储库中获取最后 5 次提交。

鉴于 GraphQL 的 JSON 响应结构的性质，我觉得有必要执行以下操作：

    const commits = data.repository.defaultBranchRef.target.history.edges
    const innerCommits = commits.map(com =>(
        com.node
    ))

不使用或多或少的以下 react-strap Card 代码映射提交或 innerCommit：

    return commits.map(com => {
        <Card 
        key={com.node.url}
        border="info">
            <Card.Body>
                <Card.Header as="h4"> {com.node.pushDate} </Card.Header>
                <Card.Text> {com.node.message}</Card.Text>
            </Card.Body>
        </Card>
    })

在屏幕上呈现卡片。

请注意，使用以下测试 html 确实会显示正确的信息，就像单个长字符串一样。

return(
        <p>{commits.map( a => (
            a.node.message
        ))}</p>
    )

这里调用的组件：

            <CardDeck>
                <CommitCards rName={value} />
            </CardDeck>

Answer 1

您可能缺少所需的 Bootstrap CSS。

将此导入添加到您应用的顶层某处，例如 index.js 或 App.js：
import "bootstrap/dist/css/bootstrap.min.css";

查看更多：https://react-bootstrap.github.io/getting-started/introduction#stylesheets

Answer 2

所以我想通了...

  return commits.map(com => {
        <Card 
        key={com.node.url}
        border="info">
            <Card.Body>
                <Card.Header as="h4"> {com.node.pushDate} </Card.Header>
                <Card.Text> {com.node.message}</Card.Text>
            </Card.Body>
        </Card>
    })

应该是这样的：

  return commits.map(com => (
        <Card 
        key={com.node.url}
        border="info">
            <Card.Body>
                <Card.Header as="h4"> {com.node.pushDate} </Card.Header>
                <Card.Text> {com.node.message}</Card.Text>
            </Card.Body>
        </Card>
    ))

注意 ( 与 { .