DEV Community: weibenfalk

NextJS 13 - Refactor a complete App to NextJS 13

weibenfalk — Mon, 31 Oct 2022 07:15:36 +0000

I'll show how to refactor a complete NextJS 12 Application into NextJS version 13. I'll use the new App folder, server components and client components. On the client I'll also show how to setup React-Query (Tanstack Query) to work in NextJS v13. I'll also use Typescript.

Advanced React Context with Typescript

weibenfalk — Tue, 18 Oct 2022 11:28:48 +0000

Time to talk about context again! This time it's more advanced and I'll talk about using React Context with Typescript. I'll also show how to create a custom hook and a component to use the context. Finally I'll show how to memoize the context.

React Quiz tutorial | with Typescript

weibenfalk — Tue, 07 Jul 2020 13:27:41 +0000

In this tutorial, I'll show you how to build a Quiz game in React with an open API for the questions. I'll use Typescript and Styled Components with React.

CSS Grid Tutorial | Frontend Mentor Challenge

weibenfalk — Tue, 30 Jun 2020 13:47:15 +0000

Frontendmentor is a cool place where you can find challenges of different levels. In this free video tutorial, I'll show how I tackled one of the challenges. 😃

Svelte Routing | page.js as routing for Svelte JS

weibenfalk — Wed, 24 Jun 2020 13:05:06 +0000

Svelte is cool ... So cool that I created a premium beginner course on it. =) This video is from that course. I'll show you how to create routes easily in Svelte with a tiny library called page.js

Free tutorials on React, Gatsby, Svelte, HTML, CSS and Javascript

weibenfalk — Sat, 13 Jun 2020 15:24:42 +0000

Hey.

I'm Thomas from Sweden. 🇸🇪

I'm a developer and Course/Tutorial creator on modern Front End stuff.I have created a lot of premium courses but decided I want to publish free tutorials on my own Youtube channel. I put out weekly free videos and my goal is to keep it fun, down to earth, and easy to understand. People really seem to like my teaching style so the channel is starting to do great.

I love React so there's a lot of React stuff. But also Vanilla JS, CSS, HTML, Gatsby, and Svelte. I also do some occasional backend stuff.

So ... just wanted to drop a friendly post to come join my channel if you want to learn modern development for free. 😃

https://www.youtube.com/user/Weibenfalk

If you want to check out my premium courses also you can go to www.weibenfalk.com ... I've actually discounted them with 90 percent now in the Corona times.

Thomas

Custom React Hook - useLocalStorage

weibenfalk — Tue, 12 May 2020 14:12:59 +0000

This week I show how to create a custom React Hook for automating Local Storage. And ... it's written in Typescript ;)

Developers Diary Ep 1 - Week #19

weibenfalk — Tue, 12 May 2020 14:12:13 +0000

I'm starting a new talk on my Youtube channel. Thought it could be of value to hear what "real life" code problems I experience in client work. That's why I do this talk.

It's one thing to learn from tutorials and articles but these are often fictive cases. So ... I want to do a down to earth talk about how the real working life as a developer is. From time to time on my Youtube channel.

Vanilla JS Spaceship with gravity

weibenfalk — Tue, 05 May 2020 14:10:04 +0000

In this video you'll learn how to build a vector spaceship with canvas. The spaceship is controlled with the keyboard and affected by gravity.

This is inspired by the old Amiga game Gravity Force

Life as a freelancer

weibenfalk — Thu, 30 Apr 2020 14:23:58 +0000

Gonna start doing small talks on my YT channel also. Talk about life as a developer and other stuff related to coding.

This is todays talk.

React Router 6 and more ...

weibenfalk — Wed, 29 Apr 2020 08:34:45 +0000

Hi ... it's been a while since I was active here. I've had a lot to do. Just released my Beginner Gatsby course and also produce videos each week on my Youtube channel. My idea is to start posting my Youtube videos here to remind you of my free content in that channel. =)

You can check out my channel here: https://www.youtube.com/user/Weibenfalk

I post mostly stuff in #react and #frontend .. But sometimes I do backend stuff and try out new libraries and more.

For example ... this week I try out the alpha build of React Router v6:

https://youtu.be/J4faOAn6NGA

If you're interested in my premium courses check out my course page:
https://www.weibenfalk.com

There's my new Gatsby course and it's discounted 50%. I also have my pretty popular React Movie course there where you can learn the fundamentals and intermediate React.

3 ways to edit Markdown with TinaCMS + Gatsby

weibenfalk — Thu, 09 Jan 2020 18:43:47 +0000

Originally published on TinaCMS.org

Supercharge your static site with real-time content editing! 🚀

In this post, I will explore the three different methods Tina offers to edit Markdown on your Gatsby site. You’ll learn how to set up Tina with both Page Queries and Static Queries.

This post will not cover the basics of using Tina with Gatsby. Please reference the documentation on how to initially set up Tina with Gatsby.

What’s the deal with Page Queries and Static Queries?

Before we dive down into editing Markdown with Tina we have to understand how Gatsby handles querying data with GraphQL. You can source data from almost anywhere in Gatsby. In our case, we’re using Markdown. When you build your site, Gatsby creates a GraphQL schema for all the data. Then you use GraphQL in your React components to query your sourced data.

Gatsby allows you to query your data in two ways: Page Queries and Static Queries.
Since the release of the React Hooks API and the useStaticQuery hook in Gatsby, it is very easy to query your data. There are cases when you can’t use a Static Query though. First, let’s explore the differences.

The two main differences are:

Page Queries can accept GraphQL variables. Static Queries can’t.
Page Queries can only be added to page components. Static Queries can be used in all components.

So, why can’t we use GraphQL variables in a Static Query? The reason for that is a Static Query doesn’t have access to the page context like a Page Query does. The result is that a Static Query won’t be able to access variables that are defined in the page context. You can define the page context in your gatsby-node.js file in your createPage function. Here you can supply your page with different variables that will get injected to your page on build time.

I use Static Queries as much as possible because I love the hooks API and the ease of composition possibilities it brings. For example, you can create custom hooks and reuse them in multiple components.

Let’s say that you have a GraphQL query that grabs metadata that you want on multiple pages. Create a custom React hook with the useStaticQuery Gatsby hook inside of it. Then you can use your custom hook wherever you want and always easily get that data into your component. When you need to have variables in your component, you have to use a Page Query. Page Queries cannot be used with the hooks API and have to be unique and attached to the specific page component.

Another great thing with Static Queries is that you can grab the data in the component that needs the data. That prevents prop drilling and your data is more tightly coupled to the component where it is used.

React overview

For getting data, we can use Gatsby's query options. For structuring our components, React also offers a couple of options. You can either create your component as a class or a functional component. Before the React Hooks API, you had to use class components to have state in your components. Now with hooks, you can do this with functional components.🥰

Three ways to edit markdown with Tina

Given all the options for creating components and souring data in Gatsby, we have to choose the most suitable approach for the project. Tina can work with all of these options, providing three different approaches for editing Markdown with Gatsby as described below.

remarkForm - A Higher Order Component used when you source data from a Page Query in Gatsby. This component can be utilized with both functional and class components. Please note the subtle difference here! The only difference in naming from the render props component is the lowercase “r”.
useLocalRemarkForm - A React Hook that is intended for functional components sourcing data from either a Static or a Page Query. If the component is sourcing static data, Gatsby's useStaticQuery hook would be called.
RemarkForm - A Render Props Component that you can use in class components sourcing data from either a Static or a Page Query. Static data would be sourced via Gatsby’s StaticQuery render props component.

remarkForm - How to use it and why it won’t work with Static Queries.

First, Let’s dive into how to hook up TinaCMS with a Page Query.
The remarkForm Component in TinaCMS is a Higher Order Component, a HOC in short. This means that it is a function that takes in another component and will return a new component that has added functionality to it.

If you’re not familiar with HOC's, I suggest you read about them in the React official docs. They are considered “advanced usage” in the React world.

The remarkForm component wants another component as an argument and is intended for Page Queries. A Page Query injects the data as a prop to the component and we access the data from this prop. With a useStaticQuery hook, the data is collected in a variable, that you choose, inside the component itself. That means if you're using the useStaticQuery hook in Gatsby you won’t have a component to give the remarkForm HOC. Bummer!😞 That’s why you can only use the remarkForm component with Page Queries.

So how do you use this component with a Page Query in Gatsby? First, check out the fictive Star Wars component below. It will show the three steps needed to hook everything up:

// 1. Import the `remarkForm` HOC
import { remarkForm } from 'gatsby-tinacms-remark'

const StarWarsMovie = ({ data: { markdownRemark } }) => {
  return <h1>{markdownRemark.frontmatter.title}</h1>
}

// 2. Wrap your component with `remarkForm`
export default remarkForm(StarWarsMovie)

// 3. Add the required ...TinaRemark fragment to your Page Query
export const pageQuery = graphql`
  query StarWarsMovieById($id: String!) {
    markdownRemark(fields: { id: { eq: $id } }) {
      id
      html
      frontmatter {
        title
        releaseDate
        crawl
      }
      ...TinaRemark
    }
  }
`

The above code is a component that displays information about Star Wars movies. For now, it just displays a title, but it could also display the release date and the crawl text in the intro to the film. But that’s another story in a galaxy far far away ... ⭐

The first step in this example is to import the remarkForm hook from the Gatsby plugin ‘gatsby-tinacms-remark’. This is the plugin that makes TinaCMS work with Markdown files.

There’s no need to do any additions to the code inside of the component itself. It could be any component — functional or class — structured in the way you want it. The only thing you have to do with the component itself is to wrap your component with the remarkForm HOC when you export it.

One more thing you have to do before you are good to go is to add the GraphQL fragment ...TinaRemark in your query. This is needed for TinaCMS to recognize your data and create the required editor fields in the TinaCMS sidebar. After that, you only have to start up your dev server to show the site and the Tina sidebar.

Easy enough isn’t it? Just three small steps and you’ll have a beautiful sidebar to edit your content on your site. 🤟

But what if you want to use a Static Query and not a Page Query?

useLocalRemarkForm to the rescue!

We’ve learned that the remarkForm HOC won’t work on Static Queries. So we’ll have to find another solution for using Static Queries with TinaCMS.

Great news!

The remarkForm component is essentially a "wrapper" for the useLocalRemarkForm hook. 👀 It takes in a component as an argument, calls useLocalRemarkForm with the Page Query data and returns a new component with the query data and TinaCMS connected to it.

We can use the useLocalRemarkForm hook directly, without using the remarkForm HOC. This can be useful with Static Queries or if we just prefer working with hooks!

Take a look at the code example below to get an idea of how useLocalRemarkForm works.

// 1. Import useLocalRemarkForm hook
import React from ‘react’;
import { useLocalRemarkForm } from ‘gatsby-tinacms-remark’;
import { useStaticQuery } from ‘gatsby’;

const StarWarsMovie = () => {
  // 2. Add required TinaCMS fragment to the GrahpQL query
    const data = useStaticQuery(graphql`
      query StarWarsMovieById {
        markdownRemark(fields: { id: { eq: "sw-01" } }) {
          id
          html
          frontmatter {
            title
            releaseDate
            crawl
          }
          ...TinaRemark
        }
      }
    `);
  // 3. Call the useLocalRemarkForm hook and pass in the data
  const [markdownRemark] = useLocalRemarkForm(data.markdownRemark);
  return <h1>{markdownRemark.frontmatter.title}</h1>
}

export default StarWarsMovie;

This is just an example component illustrating how useLocalRemarkForm works. In the real world, it would not be an optimal solution using a Static Query for this. That’s because, as you can see, you can’t use variables inside the useStaticQuery hook to make it dynamic. You have to hardcode the movie id. So this query will work for that specific movie only, which is no good.

Let’s break down what’s happening here:

We import the useLocalRemarkForm custom hook so we can use it in our component.
Just as before, the ...TinaRemark fragment is needed in the GraphQL query. So we add that one there.
When we’ve got our data back from the Gatsby useStaticQuery hook we can call the TinaCMS useLocalRemarkForm hook with that data. This hook will return an array with two elements. The first element is practically the data that we called the hook with. It has the same shape and is ready for us to use in our component. The second element is a reference to the Tina form. We don’t need that one so we don’t destructure it out as we do with the markdownRemark.

If you're wondering about this line:

const [markdownRemark] = useLocalRemarkForm(heroData.markdownRemark)

It is an example of ES6 destructuring. As we get an array with two elements back, I destructure out the first element (which is our data) and name it markdownRemark. You can name it whatever you want.

RemarkForm - The Render Prop Component

You can’t use React Hooks on class components. That’s why Tina provides a RemarkForm component that uses the Render Props pattern.

This component works with both Page and Static Queries. I will show how to use it with a Page Query below.

Take a look at below example:

// 1. import the RemarkForm render prop component
import { RemarkForm } from '@tinacms/gatsby-tinacms-remark'

class StarWarsMovie extends React.Component {
  render() {
    /*
     ** 2. Return RemarkForm, pass in markdownRemark
     **    to the remark prop and pass in what you
     **    want to render to the render prop
     */
    return (
      <RemarkForm
        remark={this.props.data.markdownRemark}
        render={({ markdownRemark }) => {
          return <h1>{markdownRemark.frontmatter.title}</h1>
        }}
      />
    )
  }
}

export default StarWarsMovie

// 3. Add the required ...TinaRemark fragment to your Page Query
export const pageQuery = graphql`
  query StarWarsMovieById($id: String!) {
    markdownRemark(fields: { id: { eq: $id } }) {
      id
      html
      frontmatter {
        title
        releaseDate
        crawl
      }
      ...TinaRemark
    }
  }
`

Ok, yet again, let’s see what’s happening here:

We import the RemarkForm component for us to use in our code.
In our return statement we return the RemarkForm component and pass in it's predefined, and required props. The remark prop provides RemarkForm with the markdown data sourced from the Page Query. The render prop gets the JSX that we want to render through a function, or a render prop. RemarkForm will hook up Tina for editing the data and then render whatever is specified in the render prop function.
Just as before we have to add the ...TinaRemark fragment to the Page Query.

Next steps

That's it! Three ways of using Tina for editing Markdown files in Gatsby. 🎉

In this post, we learned about how to set up Tina with both Static Queries and Page Queries in Gatsby. We also learned about three different ways to edit markdown with Tina depending on your type of React component.

This is just the basics to get you started. If you like Tina and want to learn more you should check out the official docs. There’s a lot more stuff to read there and some interesting use cases.

For example, you can learn how to apply inline editing and also how to customize the form fields in the Tina sidebar.

Tina is a great addition to the React ecosystem and static site generators like Gatsby. It gives your site a pleasant and easy way to edit and interact with your content.
I’m thrilled to see how big TinaCMS will be and what it can do as it evolves!