发布于 2026-01-06 0 阅读
0

全栈无服务器应用程序模板(React + Apollo + GraphQL + TypeScript + Netlify)apollo-graphql-typescript DEV 的全球展示挑战赛,由 Mux 呈现:展示你的项目!

全栈无服务器应用模板(React + Apollo + GraphQL + TypeScript + Netlify)

apollo-graphql-typescript

由 Mux 赞助的 DEV 全球展示挑战赛:展示你的项目!

我建造的

我创建了一个模板,可以帮助开发者快速搭建一个基于 Apollo GraphQL 和 TypeScript 的项目,并以无服务器的方式部署在 Netlify 上。此外,借助 FaunaDB 插件,开发者还可以构建一个有状态的应用。这样,开发者就可以专注于核心应用逻辑,并随着应用的增长轻松扩展,同时无需牺牲安全性。

Netlify Functions 使开发者能够部署 Lambda 函数。他们也提供了一个 Apollo GraphQL 模板。然而,该模板不支持 TypeScript,这使得 GraphQL 的优势仅限于查询和修改数据。而 TypeScript 则能帮助开发者更可靠地修改代码。此外,由于 GraphQL 中定义的模式可以直接导出为 TypeScript 类型,因此也提升了 GraphQL 的整体使用体验。

针对这种情况,Netlify 建议使用旧版命令netlify-lambda。但用户在使用过程中遇到了其他问题。

提交类别:基础技术

演示

应用程序:https://apollo-graphql-typescript.netlify.app/
GraphQL Playground: https: //apollo-graphql-typescript.netlify.app/.netlify/functions/graphql

代码链接

GitHub 标志 pushkar8723 / apollo-graphql-typescript

用于在 Netlify 上部署的无服务器 Apollo + GraphQL + TypeScript 应用的模板

基于 React 的无服务器类型化 Apollo GraphQL

apollo-graphql-typescript

Netlify状态

用于在 Netlify 上部署的无服务器类型化 GraphQL 应用的模板。

部署到 Netlify

演示: 应用程序| GraphQL Playground

工作原理

该应用的客户端以静态代码的形式部署在 Netlify 上。应用的 GraphQL 部分使用 Netlify 开发apollo-server-lambda,并以 Netlify 函数的形式部署。Netlify 将每个函数部署为 AWS Lambda 函数。您可以在这里了解更多信息。

虽然可以使用命令快速启动默认模板netlify functions:create,但它不支持 TypeScript,需要开发者使用旧版netlify-lambda命令。然而,使用旧版命令会进一步增加应用程序的复杂性,并且还存在一些问题,您可以在这里了解更多信息。

tsc在这个模板中,我在构建过程中使用命令转译 lambda 目录,从而避免了使用其他方法netlify-lambda。我发现这种方法更加简洁。

开发景观

开发景观

netlify dev命令…




我是如何搭建它的

我在构建时就集成了 TypeScript,因此无需使用旧版命令。

其他资源/信息

https://community.netlify.com/t/getting-typescript-to-work-with-netlify-functions/6198
https://community.netlify.com/t/does-netlify-dev-support-typescript/3842

更新:

我进一步集成了graphql-codegen自动生成 GraphQL schema 的 TypeScript 类型定义的功能。此外,我还集成了eslint代码husky检查功能,并在每次提交之前对其进行验证。

更新 2:

我使用此模板创建了一个演示项目,并在GitHub上集成了 FaunaDB 插件。

文章来源:https://dev.to/pushkar8723/template-for-serverless-stateful-statelesss-typed-graphql-app-deployed-on-netlify-3al