如何使用 GraphQL 保存 Draft.js 数据答案

【问题标题】：How to save Draft.js data using GraphQL如何使用 GraphQL 保存 Draft.js 数据
【发布时间】：2018-05-09 02:48:59
【问题描述】：

我搜索过高低。但是，我确实找到了convertToRaw 和convertFromRaw 的方法。很好，但是如何使用 GraphQL 发送原始数据？

选项 1：

首先想到的是，只需使用JSON.stringify(..)，创建一个GraphQLString 并发送它。繁荣！完毕！嗯……不是这样。如果我走那条路，GraphQL 期望值用双引号括起来，我收到关于 unexpected token ' 等的错误。

选项 2：

发送它并使用GraphQLInputObjectType。那会起作用，但是...您必须在blocks 数组中写出所有这些键。没有！我的第六感告诉我JSON.stringify(..) 有更好的方法，但是……如何？

以下是使用 convertToRaw 时数据外观的直观表示：

传递给GraphQLString的字符串：

"{"entityMap":{},"blocks":[{"key":"7iq9s","text":"This is the type of text to pass to db via GraphQL","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}]}"

“预期语法错误 GraphQL 请求 (29:36) :,

没有convertToRaw：

{"entityMap":{},"blockMap":{"bk8ro":{"key":"bk8ro","type":"unstyled","text":"This is the type of text to pass to db via GraphQL","characterList":[{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null}],"depth":0,"data":{}}},"selectionBefore":{"anchorKey":"bk8ro","anchorOffset":0,"focusKey":"bk8ro","focusOffset":0,"isBackward":false,"hasFocus":true},"selectionAfter":{"anchorKey":"bk8ro","anchorOffset":50,"focusKey":"bk8ro","focusOffset":50,"isBackward":false,"hasFocus":true}}

【问题讨论】：

“我收到关于意外令牌'等的错误。”它发生在哪里？你能展示你如何将 json 字符串传递给 graphQL 客户端的完整代码吗？
您好，我回来后会进行编辑。从一开始就应该这样做。对不起
@MikhailShabrikov 你好。我现在已经进行了编辑
奇怪的行为。它只发生在 draft.js 原始对象上吗？如果您将 { a: 'foo', b: 'bar' } 这样的简单对象字符串化并将其传递给 graphQL 客户端，它会起作用吗？
是的，还是一样。

标签： reactjs graphql apollo draftjs

【解决方案1】：

我想经过一番研究后我可以回答这个问题。这个答案使用atob() and btoa()。

将值传递给GraphQLString's args，即content：

将 Draft.js 转换为 convertToRaw
JSON.stringify() 结果
使用 btoa()

这样你会得到一个很长的字符串：Q29udGVudFN0YXRlIHsgImVudGl0eU1hcCI6IFtvYmplY3QgT2JqZWN0...etc

要解码，请使用atob(), JSON.parse()thenconvertFromRaw`。也许有一种更简单的方法，但就目前而言，这是可行的。我确信这些步骤可以减少。

【讨论】：