标签：const Edges client Contentful API GraphQL 模板 apollo contentfulData
- 配置contentful
- 创建免费账号
- 根据提示进行操作，
- Content Model - 创建页面属性模板 (personalWebsite)
- content entry - 根据属性模板，添加内容，最后发布
- API call - 发布后，可以使用Graph QL 或者 REST Api 获取内容
- 在Settings -> API Keys 中，添加新的API key. (系统默认会创建几个，所以可以直接使用或者自己创建.)
- 保存Space ID, Content Delivery API - access token, 如果有预览网页的话，可以保存下
- 创建react项目，这里我创建的是Nextjs项目
- npx create-next-app@latest --typescript
- Next中有关于GraphQL的模板，我没有使用: npx create-next-app next-with-apollo
- 使用Apollo Client插件来连接API
- npm install @apollo/client graphql
-
- 初始化Apollo - `apollo-client.js`
-
// apollo-client.ts
import { ApolloClient, InMemoryCache } from "@apollo/client";
const client = new ApolloClient({
uri: `https://graphql.contentful.com/content/v1/spaces/${process.env.CONTENTFUL_SPACE_ID}/environments/master?access_token=${process.env.CONTENTFUL_DELIVERY_API_KEY}`,
cache: new InMemoryCache(),
});
export default client;
-
- Query 部分，点击Open GQL Playground会给你基本模板，然后添加自己需要的属性ID就可以
-
-
// page/index.tsx
const Home: NextPage = (props:any) => {
const {contentfulData} = props
return (
<div className={styles.container}>
{
JSON.stringify(contentfulData)
}
</div>
)
}
export async function getStaticProps() {
const {data} = await client.query({
query: gql`
query contentfulData {
lasalleCollege(id: "5vl5HzuiPl2LaZfbvLDKya") {
lciCampuses,
title
}
}
`,
});
return {
props: {
contentfulData: data,
},
};
}
export default Home
标签：const,
Edges,
client,
Contentful,
API,
GraphQL,
模板,
apollo,
contentfulData
From： https://www.cnblogs.com/ningxin/p/17143078.html
