we taught TypeScript to understand GraphQL queries!
🎉 today we’re releasing gql.tada, which infers types for GraphQL docs right in TS as you type them! together with our LSP plugin, this is the smoothest GraphQL client experience yet ✨
PSA:
Surnames can have accented letters.
Surnames can be as short as one letter.
Surnames can have spaces.
Some people don’t have surnames.
Some contain dashes.
Some contain lowercased particles.
If you work for a bank or gov. maybe bring this up please 😅♥️
I'm currently working on creating a new coding font and
@ken_wheeler
has come up with the perfect name for it: "Dank Mono" 🔥😅 (DM me if you'd like to try it & provide some feedback)
we've been quietly working on it and today I'm happy to officially announce urql v1! 🚀
urql is a highly customisable & versatile, yet easy to get started with, GraphQL client for React ⚛️
Blog post ✍️
GitHub repo 🖇️
In styled-components v5 we'll turn on BEAST MODE 🚀
first summary of the benchmark numbers I've dropped before:
• ~50% faster SSR ✨
• up to 10x faster rehydration 😳
• ~25% faster mount times 💯
after shipping gql.tada, it didn’t take long for someone to open an issue with a huge 7MB schema 🏋️
on every edit, TS took a whole 8s to type-check 😅
We just shipped a fix and it now takes ... <40ms ❤️🔥 I'm flabbergasted myself..
🧵 for how we debugged this
New tutorial alarm! 🚨❤️
now has a new tutorial on React + urql, all with hooks,
#urql
, and urql's new normalized caching! 🤖🎉
Huge thanks to
@prisma
and
@nikolasburk
for making this happen!
I'm currently working on creating a new coding font and
@ken_wheeler
has come up with the perfect name for it: "Dank Mono" 🔥😅 (DM me if you'd like to try it & provide some feedback)
writing parsers by hand sucks but today I'm open sourcing a solution: reghex! 🧙✨
reghex is a sticky regex-based parser generator, to write parsers more quickly using tagged templates & a regex-like DSL! check it out 🥳
👋 quite fittingly for Fri 13, today is my last day at
@FormidableLabs
😭 but I'm excited to say I'm moving on to none other than
@GraphCDN
😍✨ couldn't imagine a more fitting next role for myself! ✌️
Just published "prism-react-renderer" 🎉💖 It renders Prism highlights directly to React, has a downshift-like API (
@kentcdodds
🙌), built-in VSCode-like theming, vendored Prism so there's no global-pollution/version conflicts;
If you've checked recently you may have noticed that I started shutting it down.
Today I'm releasing the ‘final’ version of Dank Mono on... Gumroad of all places, for 40% less than before! 😅🌟
It’s my birthday! 🎂 the only day I’ll shamelessly promote my OSS work 🥳🙇♂️
urql’s Graphcache — a sophisticated yet tiny GraphQL cache
RegHex — a parser generator
useEditable — a contenteditable hook
1/3
I'm so tired of growing my Twitter network slowly & steadily, maybe I should just post TEN THINGS SIGNALLING THE END OF REACT, GRAPHQL AND JS every day 🤔🤣
GraphQL’s value is in its guarantees.
If someone says “I don’t see why I’d need it” but uses Swagger, conventions, JSON Schema or some shit, writes code for normalisation, etc; frankly doesn’t get it 😅 GraphQL can be replaced with anything yes, but the ecosystem/community cannot
I wrote a small tagged template function in TypeScript this weekend to interpolate other streams, promises, strings, etc into an output stream. Really useful for React's Streamed SSR 💖🎉
It's just one week since our v1 announcement and we've now published urql v1.1 with Server-Side Rendering support 💯👏
This is super exciting! Stay tuned for more releases 🎉
Presentational and Stateful components?! this doesn't come up in React that often anymore, but did you know we can still apply this idea to improve our React codebases, and spot problems early? 💡😮
This is a post I wanted to publish for a long time! 💕
just got around to publish a preview of "prosemd" with a VSCode plugin! ✍️ it's a small proofreading language server to save time on editing posts & docs (10hrs well invested 😅)
🐙 GitHub source & LSP:
🔍 VSCode Extension:
so to showcase this: here’s the entire grammar of the GraphQL query language as a GraphQL.js compatible parser 😇 ~300 lines, quick to write, fast enough
writing parsers by hand sucks but today I'm open sourcing a solution: reghex! 🧙✨
reghex is a sticky regex-based parser generator, to write parsers more quickly using tagged templates & a regex-like DSL! check it out 🥳
New readme alarm! 🚨
#urql
has a new README that will help you to get started faster, with new sections for a quick intro, normalised caching 💾, and more! 🍾🎊
now that I’ve got a few open PRs here, it’s probably time to announce that I’ve joined the dev tools team at
@expo
! 🥳
i'm right on time to help make Expo feel at home on the Web and couldn't be more excited! ❤️
(also, check out the new Expo Router API Routes beta 🌠👀)
most people ask why they may want to use urql, and we want everyone to make an informed decision, so we’ve now added a 🔎 Comparison page to the urql docs! 🎉
So running Reason on
@codesandboxapp
wasn't quite enough for me 😅 so here's a demo of it bundling & serving a React Native Expo app 🎶🤖❤️ I'm not quite sure if there's any limit to how awesome the containers are 😂 cc
@CompuIves
@expo
💥 BIG life news 👋
I'm going full-time Open Source and am slapping a small indie brand on it:
💡I want to help teams use projects I work on (like urql!) and give 1:1 support
📐 What else? TBD. Workshops, office hrs, short gigs… Let's chat & see ♥️
We have been a little quiet about this, but setting up urql with Offline Support is super quick now! you can try it out today and quickly step-by-step add normalised caching, optimistic updates & resolvers, and finally Offline persistence! 😍🧙♀️
More exciting news on
#urql
! 👨🍳
Graphcache (our normalised cache) will have schema awareness in the next RC.1! Thst means it'll be able to deliver partial results and match fragments deterministically 😻👾
in other news, thanks to some pointers from
@Rich_Harris
the urql bindings for
@sveltejs
will be done soon! 🧡
due to stores being just subscriptions this doesn't require much code at all 😍
Shout out to
@FrontendMasters
who’ve donated a massive 1K$ to the styled-components open collective! 😍♥️ (and by the looks of it to a lot of other amazing projects as well 👏)
We were told <React.Suspense> is not ready and we shouldn't use it with urql. That's why we're releasing urql-exchange-suspense, so you can try out GraphQL with suspense right now! 🙃
🦄 Demo:
🥫 Repo:
⚠️ Use at your own risk
urql is progressing really well at the moment! 📈😍
since I won’t haven’t written a follow up blog post yet, here are some random facts and thoughts about it in a /thread ✨
urql’s normalised cache has reached v1.0.0 and is now stable! ☀️🥳
This version also makes cache resolvers more powerful and adds a relayPagination helper! 👌😍
react-ssr-prepass: A quick prepass React renderer for SSR supporting suspense & any other fetching logic ✨ with this you can use a dumb form of suspense today 🚀 (Prior art: ReactPartialRenderer, react-apollo's getDataFromTree & react-tree-walker)
Story time! 🔖 I remember when
@mxstbr
was implementing Spectrum’s thread messages. Sending a message would execute optimistically, and the updater would add it to the thread while it was sending. He was building it so that sending a message would appear to be immediate. 🧙♀️ 1/
in
@urql
/exchange-graphcache 1.2.2 we've looked at perf & GC times and have massively improved perf 🚀 (AND reduced its size from 8 to 6.6kB gzipd 📦)
It'll be running massively faster on low-end devices now! 🗺️
biiiig urql release update! 😍
• @defer and @stream support has officially landed in core and all stable releases 🚀
• Graphcache now maintains structural equality between updates 📖 basically, memo/useMemo are now much more effective out of the box ✌️
tl;dr: React server components continue a trend where library authors will have difficulties working w/ React because of APIs that are really user-focused.
I'm a tad concerned & excited. while I don't want to think about merits yet, I do want to share my concerns 😅❤️
With GraphQL we have some common problems when building apps 🤔
💬 What are the arguments for that field?
💬 Is this result from my cache?
💬 Show me all the data tho!
💬 What data did just update?
♥️ The urql Explorer shows all of this!
Just published a small package that allows you to remote control your Spectacle slides on multiple devices ✨ (WebRTC magic + no backend to be deployed) 🙌
Another thing worth mentioning is that we at Formidable now internally earn an “OSS wage” compensating us for Open Source work in our free time ✨💰😱 We’ve been inspired by the “Spice Program” And have created our own so called “Sauce Program”, so everyone wins 🙌
Oh bother! dangerouslySetInnerHTML just to get Prismjs to work with React again? No more with prism-react-renderer! Available in every npm client near you! 😊
TIL Apollo's cache's KV store is in a separate library called "optimism" 👀
since we need a KV store for urql's normalised cache as well, we published it as "pessimism" 😛💛
A bit of a different experiment by
@JoviDeC
and myself ☢️😄
graphql-web-lite is an attempt to slim down commonly used exports from graphql-js for GraphQL clients 🐜 For urql we get a delta of -5.49kB minzipped (aka ~1.4 Preacts 😃)
In 2019, urql was the second fastest growing GraphQL client library, adding 2.2K stars! 🌟 (and 8th overall)
This is super exciting! And I hope 2020 will be just as good 🙌
new releases for urql! 🦅
@urql
/exchange-graphcache now pulls in a lot less from graphql (net. reduction -9.42kB gzip!! 😱)
& the gql`` tag function is now built into
@urql
/core 💯💖
We've just released a whole flurry ❄️ of improvements for urql's family of packages! 🎉 it's too much to list here so please read our summary (which also has info on what's coming soon!) ⚠️💙
finally pulled the trigger and built an ortho split keyboard 😻⌨️ soldered and assembled it all yesterday and it's sooo thin.. also first time I had to solder SMDs, and learning how to type on this will admittedly take ages 😄
Them: we want to colocate GraphQL fragments to components to represent data dependencies but also keep all of them in one place for ease of use facilitated by a powerful yet intuitive compiler pattern w/ type gen......
My overloaded brain:
urql v1.3 is out with some minor edge-case fixes!
• cache-and-network policy fixed 🐜
• extensions from responses are now passed through correctly 🏃♀️
• React Native fixed (soz) 😅
• operation context can now be altered from hooks 🗜
The first update (v0.460) of Dank Mono has just been released ✨🔥 Basically I've reworked the "f" to be wider and to better fit in with the other letters 🧡 Thanks to
@acdlite
for helping me decide on the right changes!
On Tuesday
@jevakallio
and I are giving a workshop on Interactions in React Native featuring Reanimated & GestureHandlers at
@react_native_eu
🚗💯💛 (yep, this is one of the introing demos) cc
@kzzzf
2019 will mark 7 years of Web dev for me, 6 of them professionally 🎇🏁
Lots wouldn't have happened, if it wasn't for the colleagues and friends I've made along the way 💕
Also it never felt like I've arrived and belonged until I joined
@FormidableLabs
. Thank you! ❤️🇺🇸
Today something weird happened....
We launched urql, it was on HN, and not us but
@apollographql
got shit for it?!
First of all, how?
And second of all, how can a library that has done so much for the community be criticised so much?
urql 1.8 now has safe concurrent mode and interruptible render support 👏
I left a little thread on a related React issue to explain how it works 🐇🕳
@JoviDeC
and I spent quite some time on this... 🤷♂️
Here’s a quick run down 1/?
urql 0.3 will introduce “exchanges” (powerful operation pipeline that also handles caching) and here's a sneak-peek of urql-exchange-apollo that enable urql to use Apollo Links 🚀🔥 cc
@ken_wheeler
@apollographql
What's this? Spoiler: it's not CodeMirror 💙
For a (soon to be revealed) project I took my small useEditable hook and made a new GraphQL query editor 🎉
It's amazing how reusable the new graphiql LSP packages are 😍
I added a small script to prism-React-renderer that converts VSCode themes over automatically ✨ first thing I ported over was obviously
@sarah_edo
’s Night Owl 🦉
Exciting times!
@urql
/exchange-graphcache 2.0 will be faster yet AGAIN 😍 but there’s more! it will also garbage collect unreachable data (using automatic reference counting) ✈️🗑
I was not planning to announce this yet, but let's see who's actually interested in it 😅😛
This is "Wonka" — A callbag(-ish) implementation for
@reasonml
which are iterables and observables in one (spec by
@andrestaltz
)
Here are my slides from the LEGO meetup about urql and experimentation in the GraphQL client community ✨🙌
coming to urql soon: exchanges 🤝, customisable caching 📢, subscriptions 💬, and more (which you can all try today by installing “urquelle”)
✍️ today's the day for a new post, explaining normalised caching in GraphQL 📦 wonder how it works? learn how urql's Graphcache works in detail 💖 “Caching Relational GraphQL Data.”
2021 JS predictions:
🌐 Cloudflare will be a bigger player in web dev and edge CDN workers will gain a larger following in the mid-scale space
💭 There'll be more bundler projects gaining in popularity (like WMR) and eventually there'll be a Next competitor with a different focus
A couple of months ago, I published RegHex, a sticky-regex parser generator 🧑🏫 and I finally got around to write about it, which will be the first post on my new blog ✍️ check it out! 💖
Issues that I love to help with: “I tried X, Y (See example) and it doesn’t do what I expect, which is Z”
Issues that I procrastinate replying to: “I want to do X but it doesn’t work”
Sweet new urql docs! 🚀📖
We've just released urql's new documentation! If you were searching for excuses not to learn urql, you just ran out 😜 the new docs are restructured, rewritten, redesigned, and have more content than before!
TS would reevaluate a generic that constrained the introspection schema. Since it was checked against the IntrospectionQuery type, every single type, field was checked.
An entire redundant check that took 3s.
So, tweaking this fixed this issue entirely 🎉
this weekend I dived head first into the world of contentEditables and MutationObservers once more 🧑🏫
The result? the useEditable hook that turns an element into a fully editable surface that you can still render to with React! ☀️😻 (experimental)
just to put this into perspective. this is our typical thread example for urql but:
- upgraded urql & Graphcache
- still uses its schema awareness & full Offline support
- WMR + Preact + Preact Router + Goober
all that & it's smaller than react-dom 🤯
new releases for urql! 🦅
@urql
/exchange-graphcache now pulls in a lot less from graphql (net. reduction -9.42kB gzip!! 😱)
& the gql`` tag function is now built into
@urql
/core 💯💖