在 nextjs 应用程序中从 graphql api 获取数据答案

【问题标题】：fetching data from graphql api in nextjs app在 nextjs 应用程序中从 graphql api 获取数据
【发布时间】：2022-12-11 06:57:09
【问题描述】：

我正在尝试从 graphql 端点查询数据，但我收到

ApolloError：JSON 中位置 0 的意外标记 <

import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
    uri: "https://api.digitransit.fi/graphiql/hsl",
    cache: new InMemoryCache(),
});

export default client;

import styles from '../styles/Home.module.css';
import { gql } from "@apollo/client";
import client from "../apollo-client";

export default function Home({clusters}:any) {
  console.log(clusters)
  return (
    <div className={styles.container}>
     {clusters.map((cluster:any) => (
    <div key={cluster.id} >
      <h3>{cluster.name}</h3>
      <p>{cluster.lat}</p>
      <p>{cluster.lon}</p>
      
    </div>
  ))}
    </div>
  )
}

export async function getStaticProps() {
  const { data } = await client.query({
    query: gql`
      query clusters{
    name
    lat
    lon
    id
  }
    `,
  });

  return {
    props: {
      clusters: data.clusters,
    },
 };
}

这是在控制台中：

response: Response {
      size: 0,
      timeout: 0,
      [Symbol(Body internals)]: [Object],
      [Symbol(Response internals)]: [Object]
    },
    statusCode: 200,
    bodyText: '<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>GraphiQL</title><link href="/graphiql/static/css/2.6872d12c.chunk.css" rel="stylesheet"><link href="/graphiql/static/css/main.869538dc.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(f){function 
e(e){for(var r,t,n=e[0],o=e[1],u=e[2],i=0,l=[];i<n.length;i++)t=n[i],p[t]&&l.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(f[r]=o[r]);for(s&&s(e);l.length;)l.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=i(i.s=t[0]))}return e}var t={},p={1:0},c=[];function i(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return f[e].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=f,i.c=t,i.d=function(e,r,t){i.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(r,e){if(1&e&&(r=i(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(i.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)i.d(t,n,function(e){return r[e]}.bind(null,n));return t},i.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(r,"a",r),r},i.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},i.p="/graphiql/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/graphiql/static/js/2.34180fb9.chunk.js"></script><script src="/graphiql/static/js/main.24a0b090.chunk.js"></script></body></html>'
  },
  extraInfo: undefined,
  page: '/'
}

为什么我在正文中收到 HTML？

【问题讨论】：

标签： reactjs next.js graphql apollo-client graphiql

【解决方案1】：

这是错误消息的相关部分：

GraphiQL 您需要启用 JavaScript 才能运行此应用

根据这个页面：https://www.upbeatcode.com/react/solved-you-need-to-enable-javascript-to-run-this-app/

你需要：
检查浏览器是否支持Javascript

在package.json中设置homepage和proxy
本地服务 React
设置proxy示例：
"proxy": "http://localhost:5000"
设置homepage示例
"homepage": "."
该页面根据需要描述了这种进一步的变化：
app.use(express.static(__dirname));

app.get("/*", function(req, res) {
  res.sendFile(path.join(__dirname, "index.html"));
});
它还描述了需要通过以下方式安装serve包
npm install -g serve
或者
yarn global add serve
接着：
serve build

【讨论】：

【解决方案2】：

你能尝试改变：

query: gql`
      query clusters{
    name
    lat
    lon
    id
  }
    `,

至

query: gql`
      { clusters{
    name
    lat
    lon
    id
  } }
    `,

再试一次看看它是否对你有影响？（我在其中添加了额外的“{}”）

【讨论】：

同样的问题：（
我做到了，但又遇到了同样的错误！