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>  
    )  
  };

做完了！我很高兴你完成了这个。这是我的第一篇技术文章，请原谅错误，或者最好还是发表评论。