Nextjs数据获取方法中的查询GraphQL API-GetServerSideProps

作者 : IT 大叔 本文共3017个字,预计阅读时间需要8分钟 发布时间: 2020-08-28

我着手建立此网站时使用的逻辑工具-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

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论