JSON Placeholder

In this article, you are going to learn about JSON Placeholder and everything associated with it. But before moving further, you need to understand more about it. JSON or JavaScript Object Notation serves a lot of functionalities. One such functionality offered by JSON is the Placeholder. As the name suggests, the JSON Placeholder can generate a place to hold the data. This data is usually fake, although it appears genuine. It is done to fill the gap of testing methods, and primarily web development-related domains use it most of the time.

What is JSON Placeholder?

JSON Placeholder is a fake REST API that is primarily used for prototyping and testing. You can call it a web developer's image placeholder. JSON Placeholder is an online service that can be used when you need fake data to prototype or test some fake data. The code for JSON Placeholder can be run from anywhere under the support of JSONP and CORS. The primary use of JSON Placeholder is to fake a server, sharing the code, and many such REST API uses are associated with it.

Why is JSON Placeholder used?

Most developers experience when they put their hands on a new library and try some exploring methods or hacking a prototype or tutorial. Hence, to test out new libraries and frameworks, they need some data for testing or exploring the aspects. They also refrain from the idea of using some API that is public because it usually takes more time to register a client and understand how things work in such a complex API rather than having to focus on the task he needs to do. In all such instances, there arises a need for some data that is available to be tested and can be faked using the REST API. This is the main reason why most developers use JSON Placeholder to gain insights. This is where the Placeholder comes in handy, like that of image placeholders mostly needed by web developers.

Features of JSON Placeholder

It doesn't need any registrations.
It needs almost no configuration.
It forms the basic API automatically.
It shares many relationships with the data.
It can incorporate cross-domains like CORS and JSONP
It is highly supported for some requests like getting, POST, PATCH, PUT, etc.
It is greatly compatible with different JavaScript frameworks and libraries like Backbone, AngularJS, etc.

Installation

To use JSON Placeholder, you need to install it on your local system using the following command given below.

$ npm install -g jsonplaceholder
$ jsonplaceholder

How to use JSON Placeholder

Below are some code snippets in jQuery that show the things that can be done using JSON Placeholder. Since Github incorporates jQuery loading, you must pick up the code and paste the code snippets into your console. Let's see what the aspect where it is applicable is.

Getting a resource

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then((response) => response.json())
  .then((json) => console.log(json));

Output

{
  id: 1,
  title: '...',
  body: '...',
  userId: 1
}

Listing Resource

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json())
  .then((json) => console.log(json));

Output

[
  { id: 1, title: '...' /* ... */ },
  { id: 2, title: '...' /* ... */ },
  { id: 3, title: '...' /* ... */ },
  /* ... */
  { id: 100, title: '...' /* ... */ },
];

Listing

{
  id: 1,
  title: '...',
  body: '...',
  userId: 1
}

Output

{
  id: 1,
  title: '...',
  body: '...',
  userId: 1
}

Creating a resource

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
.then((response) => response.json())
  .then((json) => console.log(json));

Output

{
  id: 101,
  title: 'foo',
  body: 'bar',
  userId: 1
}

Note: The resources may not get updated by the server but JSON Placeholder fakes as if it is updated.

Resource Updating

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PUT',
  body: JSON.stringify({
    id: 1,
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

Output

{
  id: 1,
  title: 'foo',
  body: 'bar',
  userId: 1
}

Resource Patching

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PATCH',
  body: JSON.stringify({
    title: 'foo',
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

Output

{
  id: 1,
  title: 'foo',
  body: '...',
  userId: 1
}

Resource Deletion

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE',
});

Resource Filtration

// This will return all the posts that belong to the first user
fetch('https://jsonplaceholder.typicode.com/posts?userId=1')
  .then((response) => response.json())
  .then((json) => console.log(json));

Nested Resource listing

fetch('https://jsonplaceholder.typicode.com/posts/1/comments')
  .then((response) => response.json())
  .then((json) => console.log(json));

JSON Placeholder API Integration

To understand the API integration of JSON Placeholder, let's create a 'Todo' list based on the data fetched. To add new data from a definite source, all you need is to integrate the Falcon platform. Falcon is not, but a data integration method makes any API integration easier. Therefore, the components you will use include API to fetch data, GraphQL for extension formatting, Queries to present the data as and when required, and the components that will allow you to render the frontend.

To move ahead on creating the application, you need to add everything to the client/src and server/src. It is recommended to use NPM packages so that functionalities can be reused. Therefore, the following steps would sum up the creation of the application.

First of all, you need to create a file with the source server/src/falcon-JSON placeholder-api/index.js. In this file, you will be requesting the API by creating the fetch requests from the source. Add the following code in the source as shown below.

const { ApiDataSource } = require('@deity/falcon-server-env');
module.exports = class JsonPlaceholderApi extends ApiDataSource {
  async todoList(_, { pagination }) {
    const query = {};
    if (pagination) {
      query._limit = pagination.perPage;
      query._start = pagination.page;
    }
    const todos = await this.get('todos', query);
    return {
      items: todos
    }
  }
  async todo(_, { id }) {
    return this.get(`todos/${id}`);
  }
};

The next steps involve adding GraphQL schema, and to do that; you need to create two files.

|-server
  |-src
    |-falcon-todos-extension
      index.js
      schema.graphql

Notice the naming convention give for the extension. It would be best to rename it based on the data type obtained from the source, unlike the API package. This is done to ensure that the source can be swapped at any point in time, but the extension remains the same along with address server/src/falcon-todos-extension/index.js.

  extend type Query {
  todoList(pagination: PaginationInput): TodoList! @cache(ttl: 15)
  todo(id: ID!): Todo! @cache(ttl: 15)
}
type TodoList {
  items: [Todo!]!
  pagination: Pagination
}
type Todo {
  userId: Int
  id: ID
  title: String
  completed: Boolean
}

In the above code snippet, you can observe that each query should be uniquely defined, so accept and return go hand in hand. Another instance to note here is that the two queries are named todoList and todo. Now, you need to look at the server/src/falcon-jsonplaceholder-api/index.js, and you might notice that some of the methods share the same name, and the methods are automatically bound due to the same name.

The next step involves pagination. It is a technique to pass the input to the PaginationInput of the todoList. It is not defined here. It is solely defined in the @diety/falcon-data/src/Pagination/Pagination.ts. This source directory contains bits of information perPage and page. Consider the pagination technique as shown in the code below.

 export type PaginationInput = {
  perPage: number;
  page: number;
};

Now, you have to map these queries using the parameters present in the directory server/src/falcon-jsonplaceholder-api/index.js.

 if (pagination) {
  query._limit = pagination.perPage;
  query._start = pagination.page * pagination.perPage;
}
return this.get('todos', query);

The result can be viewed through the link given below.

The next step includes the API extension. Now that you have added the files, you need to make sure falcon-server uses them properly and ensures all the resources are mapped together. It is done in the server/config/default.json file.

 {
  ...
  "apis": {
    ...
    "jsonplaceholder": {
      "package": "./src/falcon-jsonplaceholder-api/index.js",
      "config": {
        "host": "jsonplaceholder.typicode.com",
        "protocol": "https"
      }
    }
  },
  "extensions": {
    ...
    "falcon-todos-extension": {
      "package": "./src/falcon-todos-extension",
      "config": {
        "api": "jsonplaceholder"
      }
    }
  }
}

In the above-given code snippet, you define the JSON for the API and pass this data to the extension config "api": "jsonplaceholder". Within the API, you might also observe a host and protocol defined, and they automatically get used by the function present in the directory server/src/falcon-jsonplaceholder-api/index.js.

Now, the final task involves testing your GraphQL. Since you are already set to test the extension, you need to have a falcon server running on port 4000, the default port. It would be best if you put down the queries here so that the results are returned.

Final Thoughts

Regarding the application of JSON Placeholder, you might have across the fact that it has CORS and JSONP support with an integrated environment to be used anytime and from anywhere. JSON Placeholder is a dynamic testing machine that can be faked to test out certain aspects of the application that need some temporary data to be tested. Its sole purpose is to create prototypes for the testing environment that need some sample data to get followed up. Hence, JSON Placeholder creates various prototypes to serve this purpose with ease.

Next Topic#

← prev next →