Darmau/koktohay-next

Failed to parse URL from /graphql

CaptainRuby opened this issue · 5 comments

CaptainRuby commented

pnpm dev  ✔  took 3s   at 11:33:34 

nomadicoder@0.1.0 dev /Users/rubyke/项目/WebStormProjects/koktohay-next-main
next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 1054 ms (919 modules)
wait - compiling...
event - compiled successfully in 138 ms (834 modules)
wait - compiling / (client and server)...
event - compiled client and server successfully in 214 ms (949 modules)
error - ApolloError: Failed to parse URL from /graphql
at new ApolloError (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/errors/errors.cjs:34:28)
at /Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/core/core.cjs:1853:19
at both (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/utilities/utilities.cjs:1072:53)
at /Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/utilities/utilities.cjs:1065:72
at new Promise ()
at Object.then (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/utilities/utilities.cjs:1065:24)
at Object.error (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/utilities/utilities.cjs:1073:49)
at notifySubscription (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/zen-observable/lib/Observable.js:140:18)
at onNotify (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/zen-observable/lib/Observable.js:179:3)
at SubscriptionObserver.error (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/zen-observable/lib/Observable.js:240:7)
at /Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/utilities/utilities.cjs:1055:68
at Array.forEach ()
at iterateObserversSafely (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/utilities/utilities.cjs:1055:25)
at Object.error (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/utilities/utilities.cjs:1159:21)
at notifySubscription (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/zen-observable/lib/Observable.js:140:18)
at onNotify (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/zen-observable/lib/Observable.js:179:3)
at SubscriptionObserver.error (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/zen-observable/lib/Observable.js:240:7)
at handleError (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/link/http/http.cjs:296:67)
at /Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/link/http/http.cjs:582:48 {
graphQLErrors: [],
clientErrors: [],
networkError: TypeError: Failed to parse URL from /graphql
at Object.fetch (node:internal/deps/undici/undici:11413:11) {
[cause]: TypeError [ERR_INVALID_URL]: Invalid URL
at new NodeError (node:internal/errors:399:5)
at URL.onParseError (node:internal/url:566:9)
at new URL (node:internal/url:646:5)
at new Request (node:internal/deps/undici/undici:7002:25)
at fetch2 (node:internal/deps/undici/undici:10554:25)
at Object.fetch (node:internal/deps/undici/undici:11411:18)
at fetch (node:internal/process/pre_execution:230:25)
at /Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/link/http/http.cjs:570:13
at new Subscription (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/zen-observable/lib/Observable.js:197:34)
at Observable.subscribe (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/zen-observable/lib/Observable.js:279:14)
at Object.complete (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/utilities/utilities.cjs:1184:43)
at Concast.start (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/utilities/utilities.cjs:1211:23)
at new Concast (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/utilities/utilities.cjs:1203:19)
at QueryManager.getObservableFromLink (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/core/core.cjs:1788:35)
at QueryManager.getResultsFromLink (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/core/core.cjs:1828:40)
at resultsFromLink (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/core/core.cjs:2005:58)
at QueryManager.fetchQueryByPolicy (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/core/core.cjs:2031:21)
at fromVariables (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/core/core.cjs:1879:40)
at QueryManager.fetchQueryObservable (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/core/core.cjs:1894:15)
at QueryManager.fetchQuery (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/core/core.cjs:1497:21)
at QueryManager.query (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/core/core.cjs:1582:21)
at ApolloClient.query (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/core/core.cjs:2203:34)
at getServerSideProps (webpack-internal:///./pages/index.tsx:192:84)
at /Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/next/dist/server/render.js:508:110
at /Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/next/dist/server/lib/trace/tracer.js:66:32
at NoopContextManager.with (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7054)
at ContextAPI.with (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:517)
at NoopTracer.startActiveSpan (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18022)
at ProxyTracer.startActiveSpan (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18782)
at runWithContext (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/next/dist/server/lib/trace/tracer.js:60:164)
at NextTracerImpl.trace (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/next/dist/server/lib/trace/tracer.js:61:16)
at Object.renderToHTML (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/next/dist/server/render.js:508:51)
at async doRender (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/next/dist/server/base-server.js:809:34)
at async cacheEntry1.responseCache.get.incrementalCache.incrementalCache (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/next/dist/server/base-server.js:929:28)
at async /Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/next/dist/server/response-cache/index.js:83:36 {
input: '/graphql',
code: 'ERR_INVALID_URL'
}
},
extraInfo: undefined,
page: '/'
}
wait - compiling /_error (client and server)...
event - compiled client and server successfully in 79 ms (950 modules)

用了pnpm还是不行，是不是还需要在strapi创建一些数据结构和api，我看到代码里面唯一连接到本地strapi的代码是
const submitUrl = process.env.NEXT_PUBLIC_EZ_FORM_URL ?? "localhost:1337/api/ezforms/submit/";
我访问这个地址是报空的，{"data":null,"error":{"status":404,"name":"NotFoundError","message":"Not Found","details":{}}}
因为我的strapi看起来像是刚完成了初始化，空无一物
所以我理解这两个项目并不是开箱即用的，还有一些前置工作没完成

Darmau commented

这个只是表单功能的提交地址。只能POST。

连接到strapi的功能设置在apollo-client.ts里，里面用NEXT_PUBLIC_STRAPI_URL定义了接口地址。

你是不是没有在strapi里设置token啊？apollo client需要两个变量，strapi的GraphQL endpoint，和一个有权限的token。这个需要在strapi-setting-api tokens里添加

Darmau commented

next项目里我一共设置了这些环境变量：

NEXT_PUBLIC_STRAPI_URL
NEXT_PUBLIC_STRAPI_TOKEN
NEXT_PUBLIC_EZ_FORM_URL
NEXT_PUBLIC_EZ_FORM_TOKEN
HOSTNAME
NEXT_PUBLIC_MAPBOX_TOKEN
NEXT_PUBLIC_PLAUSIBLE_DOMAIN
NEXT_PUBLIC_PLAUSIBLE_TOKEN
NEXT_PUBLIC_PLAUSIBLE_SITE_ID
NEXT_PUBLIC_BARK
NEXT_PUBLIC_REMARK_URL
NEXT_PUBLIC_REMARK_SITE

有些变量只跟特定功能有关，如果你不需要就把用到这些变量的组件删掉。

最重要的还是前两个，一个是strapi的接口地址，如果strapi在本地，应该是http://localhost:1337/graphql
第二个token在设置里生成，权限给read-only就可以。
然后在各个数据类别里添加一些，就应该可以了。

Darmau commented

可以先把首页的SectionStats删掉，page/album里的MapWithExif删掉，各个页面的Comment删掉，Contact页面删掉

CaptainRuby commented

我新建了一个.env文件，赋值了2个变量
NEXT_PUBLIC_STRAPI_URL=http://localhost:1337/graphql
NEXT_PUBLIC_STRAPI_TOKEN=xxx
同时删掉了你说的那些东西
在strapi的content manager里面对各个类型新增了一些entry
现在得到的错误是这样的

nomadicoder@0.1.0 dev /Users/rubyke/项目/WebStormProjects/koktohay-next-main
next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Loaded env from /Users/rubyke/项目/WebStormProjects/koktohay-next-main/.env
event - compiled client and server successfully in 956 ms (919 modules)
wait - compiling...
event - compiled successfully in 140 ms (834 modules)
wait - compiling /_error (client and server)...
event - compiled client and server successfully in 101 ms (920 modules)
warn - Fast Refresh had to perform a full reload due to a runtime error.
wait - compiling / (client and server)...
event - compiled client and server successfully in 166 ms (948 modules)
warn - Fast Refresh had to perform a full reload due to a runtime error.
error - ApolloError: fetch failed
at new ApolloError (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/errors/errors.cjs:34:28)
at /Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/core/core.cjs:1853:19
at both (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/utilities/utilities.cjs:1072:53)
at /Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/utilities/utilities.cjs:1065:72
at new Promise ()
at Object.then (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/utilities/utilities.cjs:1065:24)
at Object.error (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/utilities/utilities.cjs:1073:49)
at notifySubscription (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/zen-observable/lib/Observable.js:140:18)
at onNotify (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/zen-observable/lib/Observable.js:179:3)
at SubscriptionObserver.error (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/zen-observable/lib/Observable.js:240:7)
at /Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/utilities/utilities.cjs:1055:68
at Array.forEach ()
at iterateObserversSafely (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/utilities/utilities.cjs:1055:25)
at Object.error (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/utilities/utilities.cjs:1159:21)
at notifySubscription (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/zen-observable/lib/Observable.js:140:18)
at onNotify (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/zen-observable/lib/Observable.js:179:3)
at SubscriptionObserver.error (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/zen-observable/lib/Observable.js:240:7)
at handleError (/Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/link/http/http.cjs:296:67)
at /Users/rubyke/项目/WebStormProjects/koktohay-next-main/node_modules/@apollo/client/link/http/http.cjs:582:48
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
graphQLErrors: [],
clientErrors: [],
networkError: TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11413:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
cause: Error: connect ECONNREFUSED ::1:1337
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
errno: -61,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '::1',
port: 1337
}
},
extraInfo: undefined,
page: '/'
}

Darmau commented

看样子还是apollo的问题。

你先让strapi处于开发模式，然后访问http://localhost:1337/graphql，这时候会有个GraphQL playground，先测试一下看能不能获取到数据。