skip to Main Content

WordFlix – Single Page App tutorial: Step 8 – GraphQL Aliasing

Post Series: WordFlix – Super Powered Single Page App Tutorial

Step 7 – Starting Point

  • If you followed the previous steps of the tutorial, you should be able to continue here, but if you’re just jumping in or got lost in the last steps or just want to skip ahead, you can either check-out this branch of the Github repo or change directories to the “7” theme (wp-content/themes/7)

GraphQL Aliasing

GraphQL has a powerful feature where you can tell the server what the name of a field should be when it’s returned. This allows client applications to drastically reduce the amount of transformation that needs to occur between the client and the server. The client can declare what it wants and name it up front, and receive data in that shape without having to transform it later.

So, let’s pretend we needed our data to be called Movies instead of posts.

We could update our MoviesPage query to this:

query moviesList{
  movies:posts {
    edges {
      movie:node {
        poster:featuredImage {

And the posts list will now be called movies, and each node will be called “movie” and the featured image will be called “poster” and the sourceUrl will be called url.

Then we can update our component to use this new format of data, which might make it easier to reason about 6 months ago, because in this context “movie” makes more sense than “post”.

See if you can implement aliasing on your own by reviewing this Diff and implementing the changes.

Leave a Reply

Share This
Back To Top