[英]How to map Github GraphQL API commit responses to react-bootstrap Cards?
All the following code is in a custom component titled CommitCards.以下所有代码都位于名为 CommitCards 的自定义组件中。
Given the following gql query using React Apollo .给定以下使用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>
);
I am able to get the last 5 commits from a given repository belonging to the given owner.我能够从属于给定所有者的给定存储库中获取最后 5 次提交。
Given by the nature of how GraphQL's JSON response is structured, I feel the need to do the following:鉴于 GraphQL 的 JSON 响应的结构性质,我觉得需要执行以下操作:
const commits = data.repository.defaultBranchRef.target.history.edges
const innerCommits = commits.map(com =>(
com.node
))
Neither mapping over commits or innerCommits using more or less the following react-strap Card code:使用或多或少的以下 react-strap 卡代码映射提交或 innerCommits:
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>
})
renders the cards on the screen.在屏幕上呈现卡片。
Note that using the following test html does display the proper information, just as a single long string.请注意,使用以下测试 html 会显示正确的信息,就像单个长字符串一样。
return(
<p>{commits.map( a => (
a.node.message
))}</p>
)
The component is called here:该组件在这里被调用:
<CardDeck>
<CommitCards rName={value} />
</CardDeck>
You might be missing the Bootstrap CSS that is required.您可能缺少所需的引导程序 CSS。
Add this import somewhere towards the top level of your app, like index.js
or App.js
:将此导入添加到应用程序的顶层某处,例如
index.js
或App.js
:
import "bootstrap/dist/css/bootstrap.min.css";
See more: https://react-bootstrap.github.io/getting-started/introduction#stylesheets查看更多: https://react-bootstrap.github.io/getting-started/introduction#stylesheets
So I figured it out...所以我想通了...
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>
})
should have been this:应该是这样的:
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>
))
Note the ( vs the {.注意 ( 与 {.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.