部署后的 GraphQL 拒绝连接

Posted 2023-03-08

【中文标题】部署后的 GraphQL 拒绝连接

【英文标题】：GraphQL Refuse connection after deployment

【发布时间】：2021-03-23 02:30:27

【问题描述】：

我一直在尝试在 Heroku 上运行 MERN 堆栈应用程序，其中我同时使用 Express 和 GraphQL。 Express 用于身份验证和更新。 GraphQL 用于获取登录选项的数据（您要登录的学校）并在登录时将与用户相关的数据保存到 React.Context。

我完成了项目的提议部分并将应用程序部署到 Heroku 以进行测试和收集反馈。

应用构建成功 提供了 mongodb_uri 的环境变量

问题是当我打开应用程序时，几秒钟后，当服务器响应 GraphQL connection is refused 时，前面消失了。但是，在我的电脑上运行的应用程序在 nodemon 使用 concurrently 时运行得非常好。

我完全绝望了，因为：

使用 CORS 的应用 graphiql 是假的

Procfile 包含到服务器应用程序的正确路径，并且在包含连接到 8080 的前端代理上，因为应用程序在 3000 上运行。

下面是前面的相关代码示例：

// index.js
const client = new ApolloClient(
  uri: 'http://localhost:8080/graphql'
)

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client=client >
      <Router>
        <App />
      </Router>
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('app')
);

还有后面：

// connect to DB
mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost/unimeetingsapp', 
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useFindAndModify: false,
    useCreateIndex: true
);
mongoose.connection.on('open', ()=>
    console.log('Connected to Database')
);

// heroku
if (process.env.NODE_ENV === "production") 
    app.use(express.static("../client/build"));

  
app.use(bodyParser.json());
app.use(cors());
//app.use(express.urlencoded( extended: false ));

//////////////////////
// Routes
//////////////////////

// user Auth
app.use("/api", userAuth);
// user Events
app.use("/userevent", addEvent);
app.use("/userevent", confirmEvent);
app.use("/userevent", notification);
// org Auth
app.use("/api/org", orgAuth);
// org Events
app.use("/api/org", register);

app.use('/graphql', graphqlHTTP(
    schema: schema,
    graphiql: false
))

我没有任何线索，好像我启用了 graphiql 我可以通过输入 url+/graphql 来访问它，所以端口可能不是问题，如果我错过 Procfiles Heroku 中的某些内容，Heroku 会抛出错误日志。

我认为服务器在启动之前收到了加载选项的请求，所以它只是refuses to connect. 如果这可能是问题，有关如何解决该问题的任何提示？

我在功能组件中使用来自 react-apollo 的 graphql 请求数据，这就是我在前面打印的方式（来自道具）：

        var data = schoolsData;
        if(data.loading) 
            return (<option > Loading Options ...</option>)
         else 
            return data && data.schools.map(school => 
                return(
                <option key=school.id value=school.id>school.name</option>
                )
            )
        
        
     

1:

【问题讨论】：

在执行之前添加 falisafe 条件 data && data.schools && data.schools.map 并处理您缺少 schools 的条件

谢谢，现在页面保持不动，但 GraphQL 以同样的方式拒绝连接:(

【参考方案1】：

添加这个，让我知道它工作正常：

if (data.loading) 
  return (<option > Loading Options ...</option>)
 else 
  if (data && data.schools) 
    data.schools.map(school => 
      return (
        <option key=school.id value=school.id>school.name</option>
      )
    )
  else
    return (<option > Data issue, School is missing! </option>)
  

您说部署后连接被拒绝是因为您使用localhost:8080 作为服务器 URL，请尝试将其替换为已部署的服务器 URL。

// index.js
const client = new ApolloClient(
  uri: '<server URL>/graphql' // Need to replace <server URL> with server URL
)

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client=client >
      <Router>
        <App />
      </Router>
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('app')
);

【讨论】：

是的，它返回“数据问题......”而不是来自 db 的选项也许我应该从组件中删除即时 GQL 请求并以快速异步方式写入......也许请求是如此直接的服务器应付不来？

如果这对你来说是可行的，你可以这样做，正如我上面提到的，如果你使用 localhost，如果你有一个单独的 URL 用于部署的服务器，它也可能导致这个问题尝试更换它并检查。

我不明白这一点......在部署应用程序后 localhost 应该是新的 localhost......如果你明白我的意思。但是由于 myapp.herokuapp/graphql 在 graphiql 开启时是可以访问的，所以这是有道理的......我正在部署 atm

现在知道了，你的 react 和节点服务器都在 Heroku 和 Heroku 环境中，你应该能够得到服务器的localhost:8080。如果是这样的话，它看起来像一个数据问题。

现在应用程序没有返回任何东西 :D 但它肯定会使用状态码 200 执行请求，但返回空对象