Posts tagged 'graphql'


BlogQL: Storybook and Mocked Service Workers

One of the most interesting new technologies I learned about during the development of BlogQL is Storybook. Storybook allows you to develop and test React, Angular, and other web components in isolation. 

Once you create stories for your components, and thanks to Chromatic, you can setup GitHub Actions to check each incoming Pull Request for changes to your UI, a visual diff! You can require that a developer approve each change. I found that all pretty compelling and started to develop stories for all of my React components. 

The hardest part of this work was figuring out how to mock the GraphQL data needed for my components. It was difficult for me because I was still learning WebPack and polyfills in Node.js, but I got it working, in part thanks to his very useful blog post: Mock GraphQL and REST in Storybook and Jest with MSW.  

You can view the BlogQL Storybook online, thanks to Chromatic: https://63b0bf0f112b2d8b80a785f5-flfdjbdgsu.chromatic.com.

Blog QL Storybook

This is part of a series of short posts about BlogQL:  https://github.com/snoopdave/blogql.

Dave Johnson in Web Development Comments [0]
Tags: graphql node react typescript

BlogQL, Apollo Server and Google Login

The BlogQL server uses Apollo Server to provide a GraphQL API. Initially, I was using Apollo Server standalone, but when I stared integrating Google Login I realized I needed a couple of REST APIs so I added Express https://expressjs.com for that. On the frontend, I'm using React Oauth2 which makes adding Google Login support very easy to implement.  This all works fine, but if I were to start over I might consider using a server-side framework like Next.js https://nextjs.org instead of rolling my own Apollo Server and Express setup. 

This is part of a series of short posts about BlogQL:  https://github.com/snoopdave/blogql.

Dave Johnson in Web Development
Tags: graphql nodejs opensource reactjs typescript

BlogQL and create-react-app

When I first started with BlogQL, I used create-react-app (CRA) to generate the code. It worked well and allowed me to focus on learning React, but eventually I found it too constraining. I wanted to learn the underlying technologies of WebPack and Babel and CRA tucks those away. It took some time, but was able to remove CRA and replace it with my own WebPack and Babel setup.

If I had to start again, I might consider using Vite, which is growing in popularity as an alternative to WebPack.

This is part of a series of short posts about BlogQL:  https://github.com/snoopdave/blogql.

Dave Johnson in Web Development Comments [0]
Tags: graphql node opensource react typescript

BlogQL

Last summer, I started a side project to enhance my knowledge of Node, TypeScript, React, GitHub Actions and to dog-food Apollo GraphQL Studio's features that I was working on. In the past couple of months, I've continued to work on BlogQL and now that the UI is not a total embarrassment, I'm going to share a little about the project.

BlogQL is a blog app made up of a TypeScript/Node backend that provides a GraphQL API and a TypeScript/React-based frontend with a rich-text editor for editing blog entries. Below is a two-minute demo so you can see the features that BlogQL supports. You can find the complete source for BlogQL on GitHub https://github.com/snoopdave/blogql.

I'll be following this up with a series of short posts about the technologies I'm using in BlogQL. 

Dave Johnson in Web Development Comments [0]
Tags: graphql node react typescript

Blogging about Roller 6.1

I barely even update this blog, but I do update the software that powers it and I'm happy to still have the help of an awesome team of volunteers who pitch in when they want to and always when needed. Today we released Apache Roller 6.1.0, a release we had been talking about, but that was prompted by the Log4J vulnerability. See the project's blog for details.

I'm not the one making the most code changes in Roller now days, but I do help with releases. I've been spending my spare cycles hacking on BlogQL, a Node/TypeScript-based blog server with a GraphQL API and a React front-end. It's really more of an example app to help me understand those technologies, kind of like Roller was. Maybe I'll write about it someday. That's all for now.

Dave Johnson in Open Source Comments [0]
Tags: blogql graphql node react roller

Welcome

This is my personal blog where I write about open technologies, social software, web development, Java and generally whatever I want to write about. Click the link below to subscribe via your favorite feed reader:

Tags

Below are the thirty most often used tags in the blog. Hover over a tag to see a count of entries, click a tag to see the most recent posts with the tag.