What is the difference between Axios and Graphql?

What is the difference between Axios and Graphql? Thanks.

Hi @Engine44, these are quite different animals altogether – to begin with, the former is a JS library while the latter is a language on its own (although the reference implementation is indeed written in JS):

Axios

Promise based HTTP client for the browser and node.js

GraphQL

A query language for your API

Is there anything specific you want to achieve using either of these?

Thanks for your response. I am interested in bringing external data into an SSG. Until recently, I thought that using GraphQL was the best way. Now I hear that many developers favour Axios. As I understand it either can be used to bring in data. What are the pluses and minuses of each approach?

It’s not a question of favouring one over the other – they are two different things. One is a HTTP client while the other is a query language, and both can be used together just fine… e.g.

const axios = require('axios')

axios
  // HTTP request
  .post('https://api.graph.cool/simple/v1/swapi', {
    headers: {
      'Content-Type': 'application/json'
    },
    // GraphQL query
    query: `
      {
        allPersons {
          name
          films {
            director
          }
        }
      }
    `
  })
  .then(({ data }) => console.log(data))
  .catch(console.error)
2 Likes

Thanks. I see how you have used both together. I have also seen tutorials where one or the other was used to bring in data. Both approaches worked fine. Perhaps, when Axios was used, it used JS as its language.

Would it be better if I posed the question as Axios/JS vs GraphQL?

Well no, there is no “vs” just as there is no $.ajax() vs SQL, say. GraphQL is used to query data, but you still need to somehow request the data from the server; and neither can axios alone cover these two aspects.

Maybe this will clarify things a bit more.
So lets say you had an application where you wanted to get a customer, all there previous orders, and others who might have bought the same product reviews. In a micro service architecture, its more than likely you would:

  1. Fetch customer
  2. Fetch Order
  3. Fetch other customers who had same order and expect JUST the review.

So with an Axios (ajax) call , you would make 3 calls, not only that but you would return ALL the "other customer information, not JUST the reviews(this is just a cheap example for explanation and again , we’re talking micro service in this case).

The idea behind graphQL would be ONE call to the graphQL endpoint and returning ONLY the information needed for this part of the application. So you wouldn’t even get anything OTHER than the reviews. For this to work properly, the server (most popular is Apollo) is configured to handle this request ( that’s a long topic in and of itself). It can be configured to use an existing REST endpoint(s), or with a middle layer ( such as Prisma for example) create a strict graphQL api that connects directly to the DB.

Now while you could use both, usually a client app is used (such as Apollo client), which not only help with the functionality, but also provides some other helpful methods (loading, error state, caching, etc).

Long story short, if you need to fetch basic data for an app, Axios. If you need to do more complex things and / or are working on a React/ Angular type project where you need to call several endpoints but don’t need ALL the return data (over fetching), think graphQL.

I will say graphQL has a learning curve, but once you get it, it becomes much easier.

2 Likes