Building URL shortener using React, Apollo, and GraphQL — Part II
Table of Contents
- Part I: Setup and displaying short URLs using GraphQL
- Part II: Creating short URLs (this post)
- Part III: Creating serverless function for hashing
- Part IV: Short URL stats (number of clicks, etc.)
- Part V: User authentication
Part II: Creating short URLs
In the part of this series we will create a React component and corresponding queries for creating Links. We will also implement the client-side hashing function and create a GraphQL subscription to automatically refresh the list of links as soon as a new one is created.
The code for this project is available on GitHub if you want to use it as a starting point. Note that the code might not be in-sync as I will be updating it as I am writing the remaining parts of this series.
Link Component
Let’s create a file src/components/CreateShortLink.js and define the UI for creating short links. The component has two inputs, one for the URL and one for a description, and a button that actually creates the link. Both values are stored in component state and can be retrieved when create button is clicked.
