3 ms·
yeah, you could use the json encoding extension as a starting point: https://htmx.org/extensions/json-enc/ https://htmx.org/extensions/json-enc/
by recursivedoubts 6y ago
yeah, you could use the json encoding extension as a starting point:
https://htmx.org/extensions/json-enc/ https://htmx.org/extensions/json-enc/
- gavinray 6y agoI was just trying that, it seemed not to be working for some reason. I manually copy-pasted the source code into my app, and got: htmx.min.js:1 TypeError: Cannot set property 'Content-Type' of undefined at Object.encodeParameters ((index):11) at htmx.min.js:1 The code for it is: xhr.requestHeaders['Content-Type'] = 'application/json' But I believe it should be xhr.setRequestHeader('Content-Type', 'application/json') When I do this, it seems to work https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequ...
- recursivedoubts 6y agolooks like there's a bug in the json-enc extension: it's relying on the test mock which has a requestHeaders property that a real xhr won't. so the tests passed but it doesn't work irl... good catch! want to submit a pull request fix?
- gavinray 6y agoSure =D Done! Also this extension API is pretty straightforward, the element reference and parameters are right in the args so it's an easy mapping to GraphQL query strings from there. Awesome! I was able to get a minimal version working using just this (with json-enc extension patch): <input type="text" name="query" hx-ext="json-enc" hx-post="http://localhost:8080/v1/graphql" hx-trigger="keyup changed delay:500ms" hx-target="#search-results" placeholder="<GRAPHQL QUERY TEXT HERE>" /> <div id="search-results"></div> Pretty cool
- recursivedoubts 6y agoi'd love a graphql extension for the next release, if you are interested
- deleted 6y ago[deleted]