如何在react js next js中设置csrf令牌

Question

我正在尝试从前端获取我的 graphql api，之前我使用的是 axios，我用代码解决了这个问题，但是在下一个 js 上我无法在 getstaticprops 上使用 axios 所以我决定使用 fetch 但它显示 csrf我的后端服务器中未设置 cookie

data.js

import React, { useState } from 'react';
import axios from 'axios';

export async function getStaticProps() {
     const query = `
     query{
        filterBooks(title:"text book" id:5){
          id
          title
        }
      }
       `;
     const url = 'http://127.0.0.1:8000/graphql/';
     const opts = {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ query }),
      };
     const res = await fetch(url, opts);
     const data = await res.json();

     return {
         props: { ninja: data },
         revalidate: 1, // will be passed to the page component as props
     };
  }

   const data = ({ ninja }) => {
   const [data, setdata] = useState(ninja);
   console.log(data);
     return (
         <div>
             <form action=''>
                  <input type='text' />
                  <button type='submit'>Submit</button>
             </form>
        </div>
     );
  };

export default data;