Nextjs数据获取方法中的查询GraphQL API-GetServerSideProps
我着手建立此网站时使用的逻辑工具-Locallog是Nextjs,除其他功能外,我还需要SEO(单页应用未提供),而且Nextjs很棒。
我在后端使用了Express服务器和MongoDB。这是我第一次使用GraphQL API。我在前端到处都可以查询GraphQL API的流行工具是Apollo,因此我直接转到Nextjs的Github页面并查找Apollo示例,我在不检查README的情况下复制了整个代码。查询该API可行,但由于没有在Nextjs的数据获取方法中进行查询,因此遇到了问题。如果您不熟悉它们,请查看文档。
我的数据没有在请求时获取,因此没有填充head标签,并且在某个时候出现黑屏。使用Nextjs进行SEO的整个想法被挫败了。我在Github上提出了一个问题,并被告知要使用一个较轻的库。我咨询了Google并发现了一个库:GraphQL Request,它是一个支持节点和脚本或简单应用程序浏览器的GraphQL最小客户端
我将向您展示如何使用变量查询和进行变异。我们将构建一个Todo应用程序。
首先,在npm上安装库(您也可以使用Yarn),然后在页面上导入“请求”,如下所示:
Npm i ‘graphql-request’ // in terminal
import { request } from "graphql-request"; // in your page
We will be constructing our query like so:
//request query
const TODOS = ` {
todos{
id
name
completed
date
}
}`;
在这里,我们查询所有待办事项。首先,我们创建一个变量并将其分配给我们的请求查询。
现在我们可以在Nextjs的getServerSideProps中使用它,可以使用getStaticProps或将getStaticProps与getStaticPaths结合使用,阅读Nextjs.org上的文档。
export async function getServerSideProps() {
//'request' from ‘graphql-request’ library
const res = await request(‘/api/graphiql’, TODOS);
const data = res.todos;
return {
props: {
data //Pass Data in props
},
};
}
//pass data into component
function Index({ data }) {
return (
<div>
...use data here
{data.id}
</div>
)
};
就是这么简单,我们在中传入了两个参数request(‘/api/graphql’,TODOS)
。‘/api/graphiql’
是我们的请求端点,‘TODOS’
是分配给我们的查询的变量。
Full code:
import { request } from"graphql-request";
const TODOS = `{
todos{
id
name
completed
date
}
}
`;
export async function getServerSideProps(){
const res = await request(‘/api/graphql’,TODOS);
const data = res.todos;
return {
props: {
data
},
};
}
function Index({ data }) {
return (
<div>
{data.id}
</div>
)
};
现在让我们查询一个待办事项
const TODO = `
query todo($id: String!) { // First line
todo(id: $id){ // Second line
name
date
}
}
`;
第一行:“$id”
这是一个变量,它是GraphQL“ STRING”类型(单击此处可了解所有GraphQL类型),感叹号表示“ Non Null”
第二行:然后,我们将变量分配给要传递给请求的参数。
请注意,我们仅从查询中返回“名称”和“日期”,不包括“已完成”。Graphql有助于防止过度获取。
现在让我们在graphql-request中使用它。
在pages文件夹中创建一个页面,如下所示:'/pages/[id].js',这使我们可以在请求中传递参数。如果您不熟悉此文档,请查看Docs。
export async function getServerSideProps({params }) { //Line 1
const variables = { // Line 2
id: params.id,
};
const res = await request(‘/api/graphiql’, TODO, variables); // Line 3
const data = res.todo;
return {
props: {
data
},
};
}
第1行:我们传入“参数”以访问我们的url参数
第2行:我们创建了一个“变量”对象,以在请求中传递预期的“ id”变量。
第3行:在请求中,我们传入了第三个参数。
现在,我们可以在页面中显示一个待办事项。
Full code:
const TODO = `
query todo($id:String!) { // First line
todo(id:$id) { // Second line
name
date
}
}
`
export async function getServerSideProps({params }) {//Line 1
const variables = { // Line 2
id: params.id
};
const res = await request(‘/api/graphiql’, TODO, variables); // Line 3
const data = res.todo;
return {
props: {
data
},
};
}
function TodoPage({data}){
return(
…
)
};
我们现在将进行突变。我们不需要使用数据获取方法,因为我们不在获取数据。
const ADD_TODO = `
mutation addTodo( //Line One
$name:String!
$date:String
$completed:Boolean!)
{
addPost(
name: $name
date:$date
completed:$completed)
{
name //Line Two
}
} `
第一行:注意“ mutation”关键字
第二行:我们还可以从突变中返回数据
在组件中使用我们的变异查询:
function Component () {
const[name, setName ] = React.useState("") //input state
function addTodo(e) { //submit function
e.preventDefault()
const variables = {
name, //from input state
date: new Date(),
completed: false
};
try{
const res = await request("api/graphql", ADD_TODO, variables);
console.log(res.data)
} catch(err) {
console.log(err.message)
}
}
return (
<div>
…
</div>
)
};
做完了!我很高兴你完成了这个。这是我的第一篇技术文章,请原谅错误,或者最好还是发表评论。
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » Nextjs数据获取方法中的查询GraphQL API-GetServerSideProps
常见问题FAQ
- 没有金币/金币不足 怎么办?
- 本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
- 所有资源普通会员都能下载吗?
- 本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。