Apollo Graphql Custom Scalar JSON -抱怨"TypeError: type.getFields不是一个函数“ - 腾讯云开发者社区

文章/答案/技术大牛

发布

GraphQL: File Upload & Troubleshooting

based on graphql-multipart-request-spec Client ApolloClient Setup Client is using apollo-upload-client...from 'apollo-upload-client'; const client = new ApolloClient(config); Add Scalar Upload scalar Due...Try use other names like: scalar FileUpload That may help your issue, GraphQL may regard it as custom...To prevent future compatibility issue, set resolutions in package.json : "resolutions": { "graphql-upload.../docs/apollo-server/data/file-uploads/ https://medium.com/@enespalaz/file-upload-with-graphql-9a4927775ef7

5423 0

GraphQL入门之自定义标量类型

创建 Node.js 的工程 mkdir myapp cd myapp npm init (一路回车) 安装依赖包 npm install @apollo/server graphql 定义 Schema...创建 schema.graphql 文件，内容如下： scalar DateTime type User { id: ID!...); } throw Error('GraphQL Date Scalar serializer expected a `Date` object'); }, parseValue...) { return new Date(ast.value); } throw new Error('GraphQL Date Scalar invalid'); },...其中定义了三个方法： serialize: 定义了后端对象类型转json格式值的方法 parseValue: 定义了json格式值转后端对象类型的方法 parseLiteral: 当传入的查询字符串包含标量作为硬编码的参数值时

4221 0

您找到你想要的搜索结果了吗？

是的

没有找到

前端开发使用GraphQL——VUE3使用GraphQL

框架支持不是很好(目前正在开发的Vue Apollo 4 将支持 Vue 3)，没法利用typescript来检查GraphQL接口拉回来的数据，这里记录一下处理这些问题的方式。...一、创建apollo实例创建一个apollo的实例，这里你可以定制化你的apollo实例，暂时我们先创建一个最简单的实例。...// 安装graphql-codegen npm i graphql-codegen --save--dev // package.json 里面的script 添加 "scripts": { "...MakeMaybe = Omit & { [SubKey in K]: Maybe }; /** All built-in and custom...: 'Query'; feed: Feed; }; export type QueryFeedArgs = { id: Scalars['Float']; }; 三、编写调用GraphQL的函数

4.7K2 1

你不知道的 GraphQL

函数来创建一个graphQL服务。...GraphiQL，一个Graphql领域的postman curl并不是一个很好用的工具来测试我们的GraphQL服务。我们使用GraphiQL[10]来做可视化工具。...为了添加扩展信息，我们需要在graphqlHTTP配置中添加extension函数，它返回一个支持json序列化的对象。...这需要我们运行一个http server来进行继承测试么？然而并不是。你可以单独对查询引擎进行测试而不需要跑一个服务，使用graphql工具即可。...Tip 子schema导出一个函数而不是一个数组，是因为它要确保不会发生环形依赖问题。makeExecutableSchema函数支持传递数组和函数参数。

3.9K2 0

TypeGraphQL的尝试

前言 GraphQL 在我们之前的项目中的使用情况非常不错，后端可以只需要专注于合理的 Schema 设计与开发，并不需要太关心界面上的功能交互，在前端我们用 Apollo GraphQL 替代了 Redux...结合 React 也获得了很好的开发体验 (还在用 Redux，要不要试试 GraphQL 和 Apollo？)...我们在准备使用 TypeScript 来写 GraphQL 的时候，我们会有面临一个最大的问题 GraphQL Schema Type DSL 和数据 Modal 需要写两份么？...├── tsconfig.json └── tslint.json 安装依赖安装依赖 yarn add type-graphql 2....安装 apollo-server-koa , 处理请求路由( egg.js 是基于 koa ) yarn add apollo-server-koa 集成中间件路由 // ~/app/graphql/index.ts

2.6K1 0

GraphQL 从入门到实践

user { id } } 2.2 对象类型和标量类型 Object Type & Scalar Type 如果一个 GraphQL 服务接受到了一个 query，那么这个 query 将从 Root...Query 开始查找，找到对象类型（Object Type）时则使用它的解析函数 Resolver 来获取内容，如果返回的是对象类型则继续使用解析函数获取内容，如果返回的是标量类型（Scalar Type...2.4 解析函数 Resolver 前端请求信息到达后端之后，需要由解析函数 Resolver 来提供数据，比如这样一个 Query： query { hello } 那么同名的解析函数应该是这样的...一些常用的解决方案如 Apollo 可以帮省略一些简单的解析函数，比如一个字段没有提供对应的解析函数时，会从上层返回对象中读取和返回与这个字段同名的属性。...解析函数层，给 GraphQL 的 Query、Mutation、Subscription 请求提供 resolver 解析函数 src/schema.graphql：Schema 层然后 npm

3.2K3 1

GraphQL在现代Web应用中的应用与优势

后端设置（使用graphql-yoga）首先，我们需要创建一个GraphQL服务器。...安装graphql-yoga并创建一个简单的GraphQL schema：npm init -ynpm install graphql yoga graphql-yoga# server.jsconst...前端设置（使用Apollo Client）接着，我们需要在前端应用中配置Apollo Client，与我们的GraphQL服务器通信：npm install apollo-boost @apollo/client...graphql# client.jsimport ApolloClient from 'apollo-boost';import { InMemoryCache } from '@apollo/client...查询语言：查询、突变、订阅在GraphQL中，查询和突变是通过JSON-like结构表示的字符串。

1.4K1 0

为什么我使用 GraphQL 而放弃 REST API？

参见 GitHub REST API（至少不是在头中传递 JSON）。说到过滤，就有趣多了……需要按一个字段过滤吗？没问题，可能是/todos?...本质上，所有通信都通过服务器上一个预定义的 URL（通常是/graphql）运行，借助一个简单的POST请求，其中包含序列化为 JSON 有效负载的查询。...最妙的是，PostGraphile 还以查询和修改的方式暴露视图和函数，所以如果有特别复杂的 SQL 查询需要映射到 GraphQL 字段，只需创建 SQL 视图或函数，它就会自动出现在 GraphQL...由于 Apollo 客户端库架构简单，我能够将一个使用 React.js 与 Redux 的应用慢慢过渡到 React Apollo，一个组件一个组件的，只在有意义的时候才这样做。...与原生 iOS 应用一样，Apollo iOS 是一个相对轻量级的、易于使用的库。延伸阅读 https://desiatov.com/why-graphql/?

3.3K3 0

干货 | 万字长文全面解析GraphQL，携程微服务背景下的前后端数据交互方案

站在这个层面上看，GraphQL 模式的出现，有一定的必然性。二、GraphQL 语言设计中的必然性作为一个查询相关的 DSL，GraphQL 的语言设计，也不是随意的。...但它并不是一个实践意义上的最低配置。 GraphQL Type System 是一个静态的类型系统。我们可以称之为静态类型 GraphQL。此外，社区还有一种动态类型的 GraphQL 实践。...4.5 GraphQL 不一定返回 JSON 数据格式这是另一个有趣的事实。最初我们演示了，如何基于 JSON 数据结果，反推出 GraphQL 查询语法的设计。...它是一个简单的一对一关系。默认情况下，面向两个 GraphQL 服务发起的查询是两次请求，而不是一次。...7.1.2 GraphQL-Resolver 不管是在官方的 GraphQL 文档里，还是 Apollo-GraphQL 的文档里，Resolver 都是以普通函数的形态出现。 ?

4.2K2 1

GraphQL-BFF：微服务背景下的前后端数据交互方案

站在这个层面上看，GraphQL 模式的出现，有一定的必然性。二、GraphQL 语言设计中的必然性作为一个查询相关的 DSL，GraphQL 的语言设计，也不是随意的。...但它并不是一个实践意义上的最低配置。 GraphQL Type System 是一个静态的类型系统。我们可以称之为静态类型 GraphQL。此外，社区还有一种动态类型的 GraphQL 实践。...[4.5] GraphQL 不一定返回 JSON 数据格式这是另一个有趣的事实。最初我们演示了，如何基于 JSON 数据结果，反推出 GraphQL 查询语法的设计。...之前有多少 RESTful 服务，重构后就有多少 GraphQL 服务。它是一个简单的一对一关系。默认情况下，面向两个 GraphQL 服务发起的查询是两次请求，而不是一次。...[7.1.2] GraphQL-Resolver 不管是在官方的 GraphQL 文档里，还是 Apollo-GraphQL 的文档里，Resolver 都是以普通函数的形态出现。 ?

4.3K7 2

GraphQL-BFF：微服务背景下的前后端数据交互方案

站在这个层面上看，GraphQL 模式的出现，有一定的必然性。二、GraphQL 语言设计中的必然性作为一个查询相关的 DSL，GraphQL 的语言设计，也不是随意的。...但它并不是一个实践意义上的最低配置。 GraphQL Type System 是一个静态的类型系统。我们可以称之为静态类型 GraphQL。此外，社区还有一种动态类型的 GraphQL 实践。...[4.5] GraphQL 不一定返回 JSON 数据格式这是另一个有趣的事实。最初我们演示了，如何基于 JSON 数据结果，反推出 GraphQL 查询语法的设计。...之前有多少 RESTful 服务，重构后就有多少 GraphQL 服务。它是一个简单的一对一关系。默认情况下，面向两个 GraphQL 服务发起的查询是两次请求，而不是一次。...[7.1.2] GraphQL-Resolver 不管是在官方的 GraphQL 文档里，还是 Apollo-GraphQL 的文档里，Resolver 都是以普通函数的形态出现。 ?

1.8K2 0

《GraphQL 名词 101：解析 GraphQL 的查询语法》【译】

这篇文章可不是GraphQL的入门读物。... 这个请求体显示了GraphQL的主要构建块，它指定了你尝试获取的数据。字段(Fields)：客户端请求的数据单元，最后作为JSON响应数据中的一个字段。...这样，无论你是在网络日志中或者GraphQL服务器上发现错误，你都可以通过名字很轻松的在代码库中定位问题，而不是靠猜测（类似的工具有 Apollo Optics）。...可以把操作名称想象成你最喜欢的编程语言中，一个语义化的函数名。...GraphQL查询必须包含一个标识选择集的字段，且该字段返回的是对象类型，选择集不能设置在返回值是标量类型（Scalar Types）的字段上，例如Int或者String。

3.7K2 0

2019 简易Web开发指南

HTML & CSS HTML5 CSS3 Flexbox (简易教程)，CSS Grid (简易教程) CSS Variables (Custom Properties) 响应式布局（Responsive...Functions Inheritance Javascript Data Types, functions, conditionals, loops, operators DOM操作，Events JSON...Bulma JS框架 React：目前最流行 Vue：简单易用，越来越多人用 Angular：曾经很流行，现在有点衰退状态管理（state management） Redux VueX NgRx Apollo...& Apollo GraphQL简而言之是一种API 查询语言（QL = query language），提供了一种革命性的API实现方式。...GraphQL是一种规范（specification）而不是实现（implementation）。而Apollo是GraphQL最火的实现。更多请参考：Awesome GraphQL。

3.1K4 1

为 Vue 配置 GraphQL API

本文提供一个跑的通的 demo，可以先收藏，后面如有需要可以直接使用。...先创建一个 Vue 项目执行下面的命令，就可以创建并启动一个 Vue 的 hello-world 项目： vue create hello-world cd hello-world npm run...使用 Vue Apollo Vue Apollo[2] 是一个三方库，可以让你在 Vue 的应用中使用 GraphQL，使用起来也很轻松，在上述 hello-world 目录下，也就是 package.json...同级的目录下，打开命令窗口执行： vue add apollo 这个命令会自动安装 npm 包：graphql graphql-tag @apollo/client。...Cross-origin resource sharing) 就是跨域资源共享，django 的域是 localhost:8000，而 Vue 的域是 localhost:8080，他们是两个不同的域，只要不是

1.6K2 0

GraphQL+Koa2实现服务端API结合Apollo+Vue

它弥补了 RESTful API（字段冗余，扩展性差、无法聚合 api、无法定义数据类型、网络请求次数多）等不足注意：GraphQL 是 api 的查询语言，而不是数据库。...GraphQL（https://graphql.org/users/） 1.2 为什么推荐 GraphQL 而不是 RESTful API 在过去的十多年中，REST 已经成为设计 web api...几乎所有GraphQL类型都是对象类型。Object类型有一个name字段，以及一个很重要的fields字段。fields字段可以描述出一个完整的数据结构。...5.1 使用graphQl简单查询安装找到Vue中集成GraphQl的文档 https://github.com/vuejs/apollo https://vue-apollo.netlify.app...将它与vue-apollo和graphql一起安装： npm install vue-apollo graphql apollo-boost --save 在src/main.js中引入apollo-boost

6.1K4 2

GraphQL 基础实践

虽然这让你听起来觉得像是一款数据库软件，但实际上 GraphQL 并不是数据库软件。...{ movie(name: “Manchester”) { name desc ratings }} 这个请求结构是不是和 JSON 有那么点相似？...同时在 GraphQL 中，标量字段是粒度最细的一个数据单元了，同时作为返回 JSON 响应数据中的最后一个字段。也就是说，如果是一个 Object，还必须选择至少其中的一个字段。 ?...将它安装到我们的项目中：npm install apollo-server-core graphql --save 编写中间件 runHttpQuery主要接受两个参数，第一个是 GraphQLServerOptions...前面讲到 Resolver 的时候说到，每个字段都可以对应一个 Resolver 函数，我们分别对 movies 和 actors 字段设置 Resolver 函数，将上一个 Resolver 解析出来的

13.8K2 0

基于React和GraphQL的黛梦设计与实现

所以就设计了一个黛梦（demo）------ 打通了GraphQL的接口与前端交互的流程，并且将数据存入MYSQL，分享下React和GraphQL的使用，大致内容如下： GraphQL的增删改查接口设计与实现...技术实现技术选型最近在用taro写h5和小程序，混个脸熟，所以前端这边我选用React，因为黛梦也不是很大，所以没必要做前后端分离，用html刀耕火种意思下得了。...Class组件一样可以使用state， useEffect它接受两个参数，第一个是函数，第二个是一个数组，数组中的元素的变化会触发这个钩子的函数的执行。...实际上在开发中，我们往往会采用社区一些成熟的技术栈，比如你需要进一步了解GraphQL，可以去了解下Apollo这个库。...那么前后端的架构就可以是 react-apollo，vue-apollo, 后端的话比如express-apollo，koa-apollo等等。

2.1K2 0

【Graphql实践】使用 Apollo（iOS）访问 Github 的 Graphql API

最近在协助调研 Apollo 生成的代码是否有可能跨 Query 共享模型的问题，虽然初步结论是不能，并不是预期的结果，但是在调研过程中积累的一些经验，有必要记录下。...但是不保证其一直可用，所以还是建议大家自己去新建一个自己的专属 Toekn。配置 graphiql -- graphql 调试工具这个地方，也是各种坑。...如果看不懂我上面在说什么，说明你很可能不是一个 Web 前端，那就直接用一个基于 graphiql 开发的 APP 吧: https://github.com/skevy/graphiql-app。...Github 的 API 看起来，似乎也不是很复杂嘛~~ 关于 Apollo iOS 库文档肯定是要要先看下的：https://www.apollographql.com/docs/ios/。...-name '*.graphql')" --schema=schema.json --output API.swift 【未验证】如果考虑 Apollo 自定义Header或者自定义 HTTPS 证书校验

1.9K0 0

GraphQL项目中前端如何预生成Persisted Query

GraphQL - Wikipedia 简单翻译一下: GraphQL是一个由Facebook在2012年的内部项目孵化并且于2015年正式发布的一个文档型API GraphQL的用法 GraphQL里面的所有操作归为两类...比如这里我们定义了一个方法, 方法是一个query类型的, 刚刚介绍过了GraphQL是一个描述型的API, 那么我们也可以描述一下它....Automatic persisted queries - Apollo Server - Apollo GraphQL Docs 简单翻译一下就是, 一个短dash代替一个超长的graphql schema...This library is a client implementation for use with Apollo Client by using custom Apollo Link...., 效率是不是会提高很多呢?

1.4K2 0

写在 2021: 值得关注学习的前端框架和工具库

Midway-Serverless[27]，支持阿里云/腾讯云的Serverless框架，个人觉得是目前最好用的一个Serverless框架了，虽然Serverless[28]（框架，不是真·Serverless...） GraphQL-Yoga[43]，Prisma团队出品，基于Apollo-Server，封装了一些特性，因此比Apollo-Server更容易上手，但功能却更强，比如原生支持文件上传这种。...GraphQL-Playground[46]，类似上一个，但是更美观一些，支持跟踪请求链路（Tracing）以及 Apollo Federation[47] 插件的集成（Query Plan）。...Monorepo Nx[77]，我在用这个作为业务项目的Monorepo管理，到目前感觉都挺好，尤其是Angular + Nest项目，基于后端的GraphQL Schema生成TypeScript的类型定义和函数...JSON-Server[101]，写demo神器，从JSON文件快速得到一个REST API，和Husky、LowDB同一个作者。

5.6K1 0

点击加载更多

GraphQL: File Upload & Troubleshooting

GraphQL入门之自定义标量类型

前端开发使用GraphQL——VUE3使用GraphQL

你不知道的 GraphQL

TypeGraphQL的尝试

GraphQL 从入门到实践

GraphQL在现代Web应用中的应用与优势

为什么我使用 GraphQL 而放弃 REST API？

干货 | 万字长文全面解析GraphQL，携程微服务背景下的前后端数据交互方案

GraphQL-BFF：微服务背景下的前后端数据交互方案

GraphQL-BFF：微服务背景下的前后端数据交互方案

《GraphQL 名词 101：解析 GraphQL 的查询语法》【译】

2019 简易Web开发指南

为 Vue 配置 GraphQL API

GraphQL+Koa2实现服务端API结合Apollo+Vue

GraphQL 基础实践

基于React和GraphQL的黛梦设计与实现

【Graphql实践】使用 Apollo（iOS）访问 Github 的 Graphql API

GraphQL项目中前端如何预生成Persisted Query

写在 2021: 值得关注学习的前端框架和工具库

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐