How to Setup GraphQL API on WordPress - Headless WP using Next.js [Part 6]

Aug 15, 2023

How to Setup GraphQL API on WordPress - Headless WP using Next.js [Part 6]

This video shows you how to install WordPress on a VPS server, and then enable GraphQL API, so that it can be used with a Next.js frontend.

Repo: https://github.com/iabhinavr/nextjs-blog

Website: https://codingreflections.com
---------------------------------------

Server providers:
Linode: https://codingreflections.com/go/linode/
DigitalOcean: https://codingreflections.com/go/digi…
-------------------------------------------------------------

Disclaimer:

This video is based on my personal experiences and knowledge. There is no guarantee that the information shared is 100% accurate.

Disclosure:

This video and its description may contain affiliate links, which can earn us commission if someone purchases products using those links.

Content

0.18 -> In the previous video, we had finished building the home page of our Next.js blog.

5.46 -> If you're here for the first time, I suggest you watch that first, link to the full playlist given above.

11.6 -> And in this video, we will setup the WordPress site, which is going to act as the backend API for our Next.js frontend.

19.12 -> In fact, this video does not contain anything related to Next.js.

23.919 -> So I could skip the WordPress part because most of you might already know how to set up WordPress.

30.44 -> But still I decided to include it as I want this web series to be as complete as possible.

36.32 -> Okay, I will show you how to setup WordPress site on a cloud VPS server, and enable the GraphQL API.

44.72 -> Our Next.js frontend will then send requests to this graphql API to fetch posts and pages.

52.44 -> Regarding the VPS hosting, you can go with any VPS provider of your choice.

57.6 -> For the purpose of this video, I am going to choose DigitalOcean.

65.56 -> Let me show you how to install WordPress on a DigitalOcean droplet. Currently, I am logged in to the cloud panel.

73.36 -> The Marketplace section offers one-click WordPress installation, so there is not need to set everything up manually.

80.44 -> Form the Marketplace, search for 'wordpress'.

86.88 -> Let me select this option.

90.36 -> The package includes WordPress, Apache web server, MySQL, PHP, Certbot for SSL management, Fail2ban security plugin, and PostFix.

99.36 -> Click the create WordPress droplet button, which takes us back to the Cloud control panel.

107.04 -> There we can set the remaining things such as region, server size, etc.

112.08 -> Let me select the region closest to me, that is, Bangalore. Ubuntu 20.04 is already selected as the droplet operating system.

120.48 -> Coming down, there are a few recommendations - I am going to skip all of them for now.

127.16 -> Next, we need to select is the droplet type - the cheapest option available shared CPU with Regular Disk type

134.72 -> It comes with 1GB RAM and costs $6/mo.

144.92 -> Then comes the authentication method - that is, how you want to login to the server from an SSH client.

152.16 -> You can either go with the traditional password based authentication or setup and SSH keypair.

158.12 -> I already have an SSH key added to my account.

163.24 -> So, I am selecting that. If you don't know how set up SSH keys on a server, I suggest you check out the video linked above.

174.92 -> Before finalizing the details, we can setup a custom hostname:

183.44 -> nextjs-wp-site-1

186.56 -> Add it to a project and click Create Droplet.

189.68 -> Okay, the droplet is now being created.

192.32 -> It can take a few seconds.

194.84 -> Okay, the our new droplet is active, and here is the public IP address.

200.92 -> Besides that, there is also a Get Started button,

204.72 -> Clicking on it reveals additional information,

209.52 -> and the steps to follow in order to complete the server setup.

214.12 -> It says we need to SSH into the server as the root user.

219.96 -> But before that, we want to point the domain name to the server's IP address. That is, the domain name we want to use for our WordPress site.

229.76 -> So, I have to login to my domain's DNS management.

234.88 -> Let me copy the IP address to the clipboard.

241.72 -> The domain I plan to use for this project is abhinavr.com, an I am managing its DNS from Cloudflare.

250.44 -> Currently, I on my Cloudflare dashboard. In your case, you might want to login to the domain registrar's dashboard.

257.44 -> I want to install WordPress on a subdomain called wp.abhinavr.com, so that I can use the root domain for the site's frontend.

266.52 -> We can create a new DNS A record for that.

272.52 -> The name is 'wp', that is the subdomain part, and IPV4 address - paste from clipboard. Let me disable the proxy status and click save.

285 -> The new DNS record can take a couple of minutes to fully propagate.

289.4 -> After that we can continue with the setup process.

292.36 -> We're doing this in advance because installation of an SSL certificate requires the domain to be pointed to server.

300.04 -> By the way, we will be installing a free Let's Encrypt SSL certificate using the Certbot tool from our DigitalOcean server.

309.08 -> And it requires validating the ownership of the domain name. So, pointing the domain name to the IP address proves the ownership.

317.2 -> Okay, it has been a while. Let's continue.

320.96 -> Open a terminal window, or any other SSH client on your operating system.

329.2 -> Copy the SSH command...

331.24 -> And paste it in the terminal. and also I want to add the

335.68 -> We're using key-based authentication, so I want to add the path to the private key file as well. Let me use the -i option...

346.88 -> the path is: ~/.ssh/host-keys/do-1, which happens to be the private key on my machine.

356.72 -> Since it's the first time, it asks whether you trust the fingerprint or not.

362.88 -> Type yes to continue.

365.2 -> And we are connected to the server.

369.12 -> Next, we have to follow a questionnaire to complete the WordPress setup. First, enter the domain we plan to use - wp.abhinavr.com

378.84 -> Then the email address.

380.88 -> This will be the WordPress admin user email.

384.6 -> Also, set a username...

387.2 -> and a strong password.

389.68 -> Now it asks for the site title - let it be 'WordPress Test'

394.72 -> Final confirmation - answer yes. Then, would you like to use let's encrypt to configure? Ofcourse...

401.76 -> So, enter the email address.

405.68 -> Agree to terms and conditions.

407.84 -> Would you be willing to share your email address? No for now.

412.36 -> Select the names for which you want to activate https for - enter Option 1 since it's a subdomain.

420.04 -> Now it's trying to perform the domain validation challenges...

425.28 -> Waiting for verification...

428.16 -> It's finished...

430.4 -> However, it says: challenge failed for domain wp.abhinavr.com

434.92 -> Maybe because the DNS might not have propagated fully.

439.52 -> So, let's try again manually after some time.

444.72 -> It has been a couple of minutes. Let's try running the Certbot command once again, manually.

450.48 -> which certbot says that it is installed. The command to install the certificate is: sudo certbot --apache. This will check the Apache configuration and figures out the domain names.

462.64 -> Which names would you like to activate https for? Again select the first option, which is wp.abhinavr.com

469.96 -> Performing the challenges once again, and waiting for verification.

474.96 -> Looks like now it has succeeded. Please choose whether or not to redirect HTTP traffic to https...

482.8 -> Set it up, so that all requests get redirected to the secure https URL.

490.72 -> Congratulations! Your certificate and chain have been saved at the specified location.

496.56 -> Now let's try accessing the site.

500.36 -> Go to https://wp.abhinavr.com/wp-admin/

506.2 -> Yeah! It's working. Let's enter the username and password to login.

511.84 -> Now we're on the dashboard. But it looks like DigitalOcean installed an older version of WordPress.

517.96 -> So we want to update that to the latest version, which happens to be version 6.1.1 as of now.

524.159 -> Okay, updated.

526.24 -> Let's take a look at the Posts section. You can see that it's almost empty - there's only the default Hello World post.

533.24 -> So, we want to import some dummy content so that we can design using that on the frontend.

538.88 -> I already have some backup data containing some posts, pages, and image files.

543.72 -> And I have included that in the Github repo for this project, so that you can download it and try with it.

550.24 -> I created the backup files using the well-known UpdraftPlus plugin, so you can use the same plugin to import and restore from the backup.

558.56 -> What you need to do is, download each of these five files - database, plugins, themes, uploads, and others - to you computer.

567.64 -> Then install UpdraftPlus plugin and upload the files.

572.6 -> So, let's go to the Add New Plugins page on our WordPress dashboard to install the Plugin.

581.96 -> Here it is - install it.

584.2 -> Then Activate.

585.76 -> Now go to the plugin's Settings page.

588.8 -> You will find an option to upload backup files, under the Existing backups section.

593.84 -> But before that, there is one thing I need to modify.

598.64 -> I want to modify the site address in the database backup file to match with our domain name. Otherwise, it can mess up our WordPress installation.

607.64 -> This is the domain name we want to use, but the domain on the backup file is probably different.

616.04 -> So let me locate the database backup file on my computer.

622.4 -> And here is the gzip compressed database file, which contains the data in SQL format.

628.96 -> I want to extract it, and open it in a text editor.

633.36 -> I am opening it in vscode, and as you can notice, currently, the URL is set to something else - example.com.

643.68 -> Let's replace that with the real domain name - wp.abhinavr.com.

650.96 -> Perform a search replace for all the occurrences.

660.64 -> In your case, don't forget to use your domain name. Okay.

667.12 -> Now click the replace all button.

670.44 -> Back in the folder, delete the old gzip file.

673.56 -> Now, let's open a terminal to compress the new file in gzip format.

680.36 -> To do that, we need the gzip package installed on the machine. The process may be slightly different for Windows operating system.

690.88 -> The command is: gzip, followed by the file path.

700.24 -> Okay, now we're ready to upload the files to WordPress.

707.68 -> Select all the files and start the upload process.

717.24 -> Okay, the files are uploaded. Now check the box, and click the Restore button.

724.52 -> Check all the components - plugins, themes, uploads, others, and database, then click Next.

733 -> Restore.

734.88 -> The restoration is successful. Return to UpdraftPlus configuration.

739.28 -> Now let's login again.

741.4 -> Remember, the restoration also changed the original username and password. So, we have to use the new details to login. I think I want to fix that in the backup files given on Github.

753.96 -> Let's take a look at the Posts page.

757.92 -> You can see the sample posts we can use in our Next.js blog.

766.8 -> It has also added some media files, that is, the images and photographs we can use in our design.

774.16 -> We have some Pages as well - currently an About page, a Privacy Policy page, and a Sample Page.

782.52 -> Let's visit the front end of the WordPress site - this is how it looks.

788.76 -> Later, we will disable this frontend, because we plan to use WordPress as our backend API.

795.56 -> That's what a headless WordPress site is, right?

800.12 -> The next step is enabling the graphql API. By default, WordPress gives a REST API, but a graphql API is easier to work with. You will soon realize why.

808.64 -> Once again go to the Plugins section and search for wpgraphql.

813.92 -> Here is the plugin we were looking for. Currently, it has over 20k active installations.

821 -> Install and activate the plugin.

824.04 -> Now, on the left side, you can find a new menu item, which leads to the Graphql setting page.

833.76 -> On this page, you can find the API Endpoint URL. Normally, you don't need to change it to start using the API.

837.16 -> So, the endpoint URLis domain/graphql. That's where we will be sending our requests to.

843.92 -> There are more things below that, including the option to restrict access to authenticated users with JSON web tokens.

851.48 -> Probably, I will show you that in a later video. For now, let's not touch any of these.

858.76 -> Besides that, the plugin offers a feature called the GraphiQL IDE.

864.76 -> It helps you compose graphql queries using an interface.

868.64 -> Let's open the query composer, suppose I want to fetch all the post titles.

877.12 -> For that, I can go to posts, then select nodes...

881.44 -> and then check the box towards the title, and you can see the corresponding query string

893.24 -> in the middle column. Click this button to run the query, which returns the result on the rightmost column.

903.76 -> It contains only the data we asked, that is, the title. Notice how simple the query and the data look like.

910.56 -> Whereas a REST API would contain all the unwanted fields, that we may never use in our app.

916.72 -> So, that's the no. 1 advantage of using Graphql over Rest API. It allows fetching only the required data.

923.08 -> Okay, in this case, we ran the query internally, from within the WP dashboard.

927.92 -> But it's possible to query the API from anywhere, from a remote server, or even from your local machine.

934.96 -> So, next I will show how to fetch the same data from the local machine, using Postman as our HTTP client.

942.6 -> So, here is Postman, which allows sending HTTP queries from local machine to anywhere, including remote servers.

951.12 -> It's available for all platforms including Linux, Windows, and Mac. Okay, let me create a new request.

957.88 -> Set the request type to Get. And the request URL is our graphql endpoint -

966.64 -> https://wp.abhinavr.com/graphql

970.84 -> Okay, we want to send the graphql query string along with the request, right?

981.36 -> So, go to the body tab and select the format as graphql, because postman has built-in support for sending graphql requests.

991.92 -> Going to the WP dashboard, let me copy the query string to clipboard. Then come back...

998.04 -> and paste it here on the left side. Now click Send and we got the same result. That's how to work with our GraphQL API.

1005.6 -> Taking one more example, suppose I wanted to fetch the post dates as well.

1011.68 -> So, add date to the list, and click Send. We got both the title and date.

1020.68 -> We will be implementing the same thing in our Next.js app. There are different ways to send Graphql requests using Javascript, including the Apollo Client package.

1031.319 -> In our app, we will be using the built-in fetch function, to keep things simple.

1037.56 -> Okay, let me go back to our WordPress dashboard. There is one more thing I want to show you before ending this video.

1044.44 -> That is, to disable the default WordPress frontend. Luckily, there is a plugin to do that without custom coding.

1050.76 -> Again, go to add new plugins page and search for headless mode.

1055.76 -> Here is the plugin headless mode we want to install.

1059.72 -> Activate it.

1061.68 -> Once it is installed, go to the Settings page.

1066.48 -> It says that our site is currently not redirecting, which means, frontend is not disabled.

1071.96 -> To perform that, we need to add this constant to the wp-config.php file.

1077.48 -> I'm copying this piece of code...

1082.28 -> then go to the terminal...

1084.64 -> where we are already connected into the server.

1089.32 -> I want to find out where the site files are located.

1091.08 -> I hope it is inside the /var/ directory.

1104.52 -> cd /var/www/html...then list directory... yes, this is where digitalocean has installed WordPress for us.

1117.92 -> And here is the wp config.php file. I want to open it in the Nano editor - nano wp-config.php

1124.52 -> Okay, scroll down...

1126.96 -> and paste the constant definition.

1129.68 -> Then change the target URL to something else.

1133.16 -> Let's enter the login page URL.

1136.04 -> Save and exit.

1141.24 -> Go back to the Headless mode settings page and try reloading, the value is showing up.

1147.04 -> Let's visit the frontend and try reloading - but it's still showing up probably because we're currently logged in.

1154.88 -> So let me try the same in an incognito window.

1161.92 -> Paste the URL, and this time the page got redirected us to the login.

1166.6 -> So no one else will be able to access our default WordPress front-end. So it's working.

Source: https://www.youtube.com/watch?v=0ZK09o6RjPg