Search code examples
reactjsgraphqlapollodraftjs

How to save Draft.js data using GraphQL

I have searched high and low. But, I did found how to convertToRaw and convertFromRaw. That's great but, how to send the raw data with GraphQL?

Option 1:

First thing came to mind, just use JSON.stringify(..), create a GraphQLString and send it. Boom! Done! Well...not so. If I went that route, GraphQL expects the value to be in double quotes and I got error about unexpected token ' etc.

Option 2:

Send it and with GraphQLInputObjectType. That would work but...you have to write out all those keys in the blocks array. Nope! My 6th sense tells me there is a better way with JSON.stringify(..), but...how?

Here's a visual representation of what the data looks like with used convertToRaw: enter image description here

String that was passed to 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":{}}]}"

"Syntax Error GraphQL request (29:36) Expected :,

Without 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}}
Solution

  • I guess I can answer this question after some research. This answer uses atob() and btoa().

    To pass a value to a GraphQLString's args, ie, content:

    1. Convert Draft.js with convertToRaw
    2. JSON.stringify() the result
    3. Use btoa()

    That way you'll end up with a very long string: Q29udGVudFN0YXRlIHsgImVudGl0eU1hcCI6IFtvYmplY3QgT2JqZWN0...etc

    To decode, use atob(), JSON.parse()thenconvertFromRaw`. There maybe an easier way but for now, this works. Im sure these steps can be reduced.