Photo by stock.tookapic.com 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 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. GitHub Link Component Let’s create a file 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. src/components/CreateShortLink.js The main logic for creating the links with be in the function where we will call a GraphQL mutation to create a link. createShortLink Create the GraphQL mutation Similarly as we’ve done with the queries, we need to create a mutation and then wrap the component with container. graphql In the , we have already used a GraphQL mutation for creating links: previous post mutation CreateLinkMutation {createLink(description:"First link from GraphQL",url:" ",hash:"somehash") {id}} http://example.com This time, instead of hardcoding the values, we need a way to provide the values to the mutation using. To declare variables in a mutation (or a query), you simply prepend a $ sign to the name of the variable like this: . $myvariable Let’s take the above mutation and refactor it to use variables: mutation CreateLinkMutation($url: String!, $description: String!, $hash: String!) {createLink(url: $url,description: $description,hash: $hash) {id}} Inside the parenthesis next to the mutation name we declared the required string variables — later on, we will remove the hash variable as we want to create the hashes using a serverless function. These values are then passed to the mutation and when mutation executes, it returns us the of the create short link. createLink id And just like with the queries, we can reference this mutation when we wrap our component in the container like this: graphql To access and call the mutation, Apollo injects the name of our mutation to the props objects — we just need to call it and provide the values for those three variables. Before we do that though, we need to implement the hashing function we will use to create the short links. I am not going into the actual hashing algorithm, but we are going to use a unique id (in our case we will use the number of links) and convert it to a base 62 encoding to get the hash digits. Finally, we translate those digits into a unique hash string. is the resource and explanation I used to implement the algorithm below. This Since we need to pass an to the hashing algorithm, we need a way to get that using GraphQL. Luckily for us, Graphcool automatically implements aggregation queries for all types in the schema. The aggregation queries are named following this format where is the name of your type ( in our case). A query to get the count of all links would look like this: itemCount _all[TYPE_NAME]Meta TYPE_NAME Link query GetLinkCountQuery {links: _allLinksMeta {count}} Notice the name? This is how you can name the result of the query, so you can reference to it in the code. Without that, the name of the prop would be . links _allLinksMeta There are two ways we can obtain the link count — we can follow the same pattern we did when executing the queries in the previous post — basically, execute the query, check for errors and if query is done loading and then return. The second option is that we could execute the query on demand when we actually need the value. We are going with the latter in this case, just to demonstrate how to do that. So, instead of using graphql container to wrap the component, we can use container that injects the Apollo client instance as a prop to the wrapped container. Similarly as it injects the queries and mutations. withApollo Let’s bring this all together — the hashing code, import from react-apollo, add the link count query and take care of the component wrapping: withApollo Now that everything is in place, we can write the code that’s going to get the values we entered, get the link count, create a hash and finally run the mutation to create a new short link. Next, let’s update the render method in App.js and add the CreateShortLink to it: At this point, you can navigate to to see it in action: http://localhost:3000 Creating new links Note that it’s not perfect as we need to reload the page manually each time we add a new link. We could use the GraphQL subscriptions to handle this. Create a GraphQL subscription In addition to queries and mutations, GraphQL also supports subscriptions. With subscriptions, you can push data from the server to any clients that want to listen. A common scenario for subscriptions is notifying clients about certains events, such as creation or deletion of an object or updated fields. Install the dependencies first: $ yarn add apollo-link-ws subscriptions-transport-ws Next, we create a web socket link and use the Subscriptions API endpoint for our Graphcool service (run to get to the endpoints). With both links set, we are going to use and functions from Apollo to check what type of operation is being used (e.g. a query, mutation or a subscription) and return the correct link. Here’s how the split function looks like (explained in more details ): graphcool info split getMainDefinition here import { WebSocketLink } from 'apollo-link-ws';import { getMainDefinition } from 'apollo-utilities'; ..... // Set up subscriptionconst wsLink = new WebSocketLink({uri: `wss://subscriptions.us-west-2.graph.cool/v1/xxxxxxxx`,options: {reconnect: true}}); const httpLink = new HttpLink({ uri: 'https://api.graph.cool/simple/v1/xxxxxxxxx' }); // Splits the requests based on the query type -// E.g. subscriptions go to wsLink and everything else to httpLinkconst link = split(({ query }) => {const { kind, operation } = getMainDefinition(query);return kind === 'OperationDefinition' &&operation === 'subscription';},wsLink,httpLink,); Then we can use this variable when creating the Apollo Client instance: link const client = new ApolloClient({ ,cache: new InMemoryCache(),}); link At this point everything should still work they way it did before — we need to create and actually use the subscription in the component where we are showing all links. LinkList Here is the query for subscription that triggers each time a new link is created: As with mutations and queries, we provide a name for our subscription and define the filter we want — in our case, we want to get back all fields when new object is created. We are going to use a function called on the prop to subscribe to updates. This method takes two arguments: first one is the subscription query we defined above and the second one is an function that gets called each time a new link is created. This function takes the previous state and data that was sent from the subscription and we need to merge the new data with the previous state and return the updated state. Let’s implement this in the function in the : subscribeToMore allLinksQuery updateQuery componentDidMount LinkList One last thing we need to do to make this work correctly is to update the to when querying for link count in the . Since we are using the subscription we don’t have to refresh the page anymore to see the updates — not refreshing the page also means that each time we execute the link count query will get the cached number and our hashes will be incorrect. The updated line is in bold: fetchPolicy network-only CreateShortLink.js const linkCountQuery = await this.props.client.query({query: GET_LINK_COUNT_QUERY,** fetchPolicy: 'network-only',**}); Network-only option tells Apollo to not use the cached values and always re-query. We will use the same policy once we add authentication. Ok, let’s try this out now! Go to and see that as soon as you add a link, the list of links gets updated automatically. http://localhost:3000 Subscriptions in Action! Thanks for Reading! You can follow me on and . If you liked this and want to get notified when other parts are ready, you should subscribe to ! Twitter GitHub my newsletter

Twitter

Too Long; Didn't Read

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

Building URL shortener using React, Apollo and GraphQL — Part II

Too Long; Didn't Read

Companies Mentioned

@pjausovec

RELATED STORIES