Netlify Graph: A faster way for teams to develop web apps with APIs
netlify.comOne of the founders of OneGraph here, happy to answer any questions or talk about ideas!
This is what we have been working on since the Netlify acquisition https://news.ycombinator.com/item?id=29253069. Still early days and in beta, but excited to see all the DX pieces coming together bit by bit!
When we did our original Launch HN (back in summer 2018! https://news.ycombinator.com/item?id=17602951) this was one of the primary use-cases we had in mind. GraphQL provides such a rich layer for API tooling, but bringing it all together from a developer's point of view can be pretty challenging. Hopefully this spin on it (and the built-in integrations we're rolling out for specific frameworks) should make it significantly easier.
Lots of plans (a pure vscode workflow is high on my personal wishlist), but it's time to share the current state of things with all of you folks!
This is awesome. I've been abusing Zapier for years now as a middle layer to integrate with 3rd parties without having to implement their APIs. Zapier's UI is built for non-technical users, anad it makes a lot of advanced use cases very cumbersome to implement.. Super excited to try reimplementing some of our more complicated zaps with this!
Are you all planning to implement as extensive of a collection of integrations as Zapier has?
(I'm a Zapier employee on the Dev Platform team; my comments are mine alone and don't necessarily reflect the opinions of my employer)
You may find the Zapier's developer platform useful. Instead of using pre-built integrations, you can develop and ship your own Node.js packages for private use. I've got a fleet of them that can do basically anything, but also play nice with the rest of the platform.
I'm not sure exactly what your pain points are here, but there's definitely an "escape hatch" for power users!
Plenty of plans, now we just need to execute on 'em!
Congrats to the whole team!
Is it possible to add a custom (3rd party) GraphQL endpoint to Netlify Graph at this stage?
It's technically possible on our backend, but we haven't opened it up in a user-facing way yet. Definitely high on the priority list though!
Really awesome to see Netlify pick up OneGraph, Sean. I've always recommended it to people =)
Great to hear it Gavin, thank you for the kind words!
Congrats Sean!
Thanks so much, Darby!
OT: Funny how this is never the problem I had. I’ve always had trouble with the bits on the screen, not connecting the bits behind it. Every time I see a new project that says “connect APIs real quick to your frontend” or “one click deploy database table don’t think about backend” I always think “but you’re skipping over the fun part!”
Congrats on the launch, this looks really neat.
Ah, then you're in luck! Down the road, you should be able to tell Netlify Graph how to map the boilerplate-y bits from the API to the screen, so you always get something that works (with your best practices implemented) that you can start tweaking from.
We already do this for a handful of frameworks (plain functions, next.js, remix, etc.). Here's a bit of an older example (with a much older UI) of how it works with a very plain project mapping various GraphQL operations to next.js https://youtu.be/0LJr15A0t4Y?t=73, including
Basically, you should be able to click around in an API, run a test query, say, "Oh, I want that in my app", then click a button and have it inserted exactly how you and your team would have written it.- client-side forms - server-side form validation - auto-detecting when the user needs to log into a service client-side to do some query/action - prompting the user to log into the service - re-running the query on successful login
Just finished an episode of Learn with Jason showing how to use this to build a small Spotify app using the Netlify Graph tooling: https://www.twitch.tv/videos/1299016321?t=0h25m21s (the link starts at the first step of the new app and dives right into the experience)
Jason knew next to nothing about the current state of Netlify Graph (to keep the experience authentic), so it's pretty fun to see his reactions.
Also, the app is live for anyone to use! https://netlify-graph-nextjs.netlify.app/SpotifySearchForm
From having maintained 60+ API integrations for a B2B business, I can see how Netlify Graph (or previously OneGraph) solves a real problem.
The initial integration is usually straightforward, but the maintanence of these seemingly simple API wrappers is what bites back in the long run.
With having lots of integrations, these are the usual failure points:
1. Teams find it hard to keep track of all the changelogs across APIs.
2. Failing at [1] means that API changes get noticed much later and having to cram the work into product development cycles.
PM team lead for Ecosystem @ Netlify here. Thanks for the feedback - this is exactly what we're trying to address with Netlify Graph. There is a lot of variability as APIs change, and there's a lot of value in abstracting out that complexity behind a consistent data model.
this is the direction i've been wanting Netlify to go in for years! Netlify has done very well as an aggregator of frontend developers, and GraphQL is the perfect protocol to 1) build better tooling, which onegraph has a lot of ideas on, 2) commoditize their complements (https://www.joelonsoftware.com/2002/06/12/strategy-letter-v/).
i hope more updates keep coming (i want explorer in the UI! not the CLI!) but this is a positive start.
Thanks!
The whole flow works really, really well inside of vscode with the GraphQL extension - you get autocomplete, docs, etc. And upon save, it's that same as if you had edited it in the web UI. It should even be compatible with the GraphiQL explorer extension inside of vscode (though I haven't tried it yet) https://marketplace.visualstudio.com/items?itemName=GabrielN...
And it's always tempting fate to say "we have more planned", but, well, we have more planned...
Can someone give some concrete example use cases for this? So you connect this to your Stripe or Spotify account and this lets your website visitors do something via client-side JavaScript?
There are quite a few, but as a recent public one - https://oss.love is built using Netlify Graph. It pulls in data via the GitHub API using Netlify Graph, as an example.
Another simple one would be building a chart of Salesforce opportunities to serve as an office sales gong https://www.youtube.com/watch?v=ZTaETEkZ6hE
We have customers who build a product using Netlify Graph to manage Salesforce leads/opportunities/etc. inside of Slack, etc.
> It pulls in data via the GitHub API using Netlify Graph, as an example.
Maybe I'm dense - but what is the value add here? I can pull data from github Api and build an app. Or I can pull data via netlify graph, from the github api, and build an app?
Does netlify provide the "server side" here, holding my github api keys, away from the browser that runs the app? Or something else?
Zapier on Steroids for programmers!
I like how Netlify went with a low-code approach that provides not only speed and flexibility, but also greatly helps with long-term maintenance. Web apps are now more connected and heterogenous than ever - there is a need to quickly and easily connect with various APIs. No-code falls short in providing performant and maintainable code bases. GraphQL-based tools could be the solution. Netlify seems to have taken the lead here. I only worry about potential vendor lock-in.
Congrats!
PM lead for the Ecosystem team @ Netlify. Thanks for the feedback! This is precisely the balance we are trying to strike - simple enough to solve core problems that are routine, and yet offering an exit hatch to go and code some additional stuff that you might need in your applications.
This looks interesting. I haven't got a clue what netlify does though. That's one truly useless homepage.
Netlify is a platform for static site hosting on CDNs, with the CI/CD to build those sites, and serverless/auth functions for serveside logic, plus local dev to emulate them. They coined the "Jamstack" architecture/movement which has helped frontend devs and agencies be more productive.
Now watch them add a custom datastore with authorizations a little while down the road and enjoy serverless bliss.
100% #1 integration i want to see them have with Netlify Graph is Fauna or Supabase
Is this free? Couldn’t find pricing info.
PM lead for Ecosystem @ Netlify. It's currently free while in beta. We haven't yet announced any pricing for the feature.