If you’ve been working for a little while with React, you’ll probably have crossed a design or screen that includes a form. A form where the user will input some text, number, or select an item from the dropdown based on the business requirement.
When it comes to handling forms in React, your first choice would be to install Formik and Yup, right? Well, I agree that they blend so well and makes the job easier! A lot easier!
In the past few weeks or months, I’ve been contemplating how does it look like if we have schemas? I kept on digging and digging to that thought. Would it be great? After a long time of contemplating, I think I had a breakthrough thought. I asked myself, is Yup just for Formik? Is Yup should only be used with Formik?
The answer is no and I will be going to share with you what I’ve learned!
🤔 Why Schemas?
In the past few months, I’ve been working on a lot of parsing, transforming, and some code transliteration. One thing I’ve noticed is the lack of schema in those learning processes. I had to do some manual mapping of data, duplicate code stages, and it’s kind of tedious especially if the data is large.
A schema is like a container for a structure. A structure describes how a certain field will be formatted or be stored. I think of it like metadata where it gives the details of a specific field.
I thought if we have schemas on React, data parsing, transforming or code transliteration might provide new doors on doing something in a better way. In other words, I’m exploring an uncommon path to gain knowledge that will turn in experience and will turn to wisdom to help others.
🧭 Exploring The Uncommon
I would like to say that this attempt is experimental and not highly tested, at least for now. I was honestly quite hesitant to give this a shot because if you will have to think about it, it seems like it doesn’t fit well. It was uncommon. But, I can’t get it out of my head whenever I’m coding. It always jumps right into my train of thought. Code love?
The example application that I will be sharing with you is about sending and receiving the data to the API endpoint using schemas.
Let’s go first with the sending of data to the API endpoint. Compare with the current approach and try to see if it’s better with a schema-based approach. Let’s say our endpoint accepts the following schema.
The simplest approach would be to get the form values from Formik and do an HTTP call using fetch or Axios to send the request.
It works! In this scenario, the schema-based will be redundant and inefficient. Now, Let’s try to add a data constraint and assume that the form values aren’t matched with the API schema and we need an extra layer of mapping.
Let’s see the difference with the first approach enhanced and the schema-based approach.
The non-schema-based approach used the ES6 property renaming feature and the other one leverages Yup’s features to rename a property and creating an object. We can actually use the ES6 approach to the schema-based but I wanted to illustrate it in plain approach without mixing for clarity. What do you think about it?
Now that we’ve seen how we can use the schema in sending an HTTP request to the API, let’s try this time how we can use the schema in receiving a request. Let’s also add some mismatch to the API schema that we are receiving. Mismatch API schema is unavoidable and that’s why I think it’s always a great example.
The API schema now uses snake case formatting, let’s see how we can approach this one.
We again used the ES6 property renaming feature on our first approach and on the second approach we then again used the same methods from Yup, but this time, we didn’t use the casting method in the early stage.
Renaming an object key can be done with a utility function, but if it’s not available, you can try the approach you like to use.
We’ve now witnessed some examples from receiving and sending data to the API using the non-schema-based and schema-based approach. What do you think about it?
🤖 Bringing It All Together
What I like with the schema-based is that it allows a better object field composition and being able to express how the structure should shape within. Beyond those examples, using schema-based will also allow you to add validations as well from Yup and other transformations that are natively available into it.
This is an attempt to rethink Yup as an object schema builder and not just for Formik’s validation. And rethinking something outside the normal flow will allow us to gain new knowledge, experience new opportunities, and have the wisdom to share with others.
I can see that there are a lot of things we can explore together on this schema-based approach. This is just the start and a lot of things will come to unfold as we step into the unknown.
Thank you for reading. I hope this will help you on your journey! ❤️
