API INTEGRATION PATTERNS
Linkedin Admin Panel
This document provides comprehensive information about API integration patterns used in the Linkedin Admin Panel, including HTTP client configuration, request/response handling, error management, and performance optimization strategies.
Architectural Design Credit and Contact Information
The architectural design of this API integration system is credited to Mindbricks Genesis Engine.
We encourage open communication and welcome any questions or discussions related to the architectural aspects of this API integration system.
Documentation Scope
This guide covers the complete API integration patterns within the Linkedin Admin Panel. It includes HTTP client configuration, request/response handling, error management, caching strategies, and performance optimization techniques.
Intended Audience
This documentation is intended for frontend developers, API integrators, and system architects who need to understand, implement, or maintain API integration patterns within the admin panel.
HTTP Client Architecture
Service-Specific Axios Instances
JobApplication Axios Configuration
import axios from 'axios';
import { CONFIG } from 'src/global-config';
const jobApplicationAxiosInstance = axios.create({
baseURL: CONFIG.jobApplicationServiceUrl
});
jobApplicationAxiosInstance.interceptors.response.use(
(response) => response,
(error) => Promise.reject((error.response && error.response.data) || 'Something went wrong!')
);
export default jobApplicationAxiosInstance;
Fetcher Utility
export const fetcher = async (args) => {
try {
const [url, config] = Array.isArray(args) ? args : [args];
const res = await jobApplicationAxiosInstance.get(url, { ...config });
return res.data;
} catch (error) {
console.error('Failed to fetch:', error);
throw error;
}
};
Service Endpoints
export const jobApplicationEndpoints = {
jobPosting: {
updateJobPosting: '/v1/jobpostings/:jobPostingId'
,
deleteJobPosting: '/v1/jobpostings/:jobPostingId'
,
getJobPosting: '/v1/jobpostings/:jobPostingId'
,
listJobPostings: '/v1/jobpostings'
,
createJobPosting: '/v1/jobpostings'
},
jobApplication: {
deleteJobApplication: '/v1/jobapplications/:jobApplicationId'
,
getJobApplication: '/v1/jobapplications/:jobApplicationId'
,
updateJobApplication: '/v1/jobapplications/:jobApplicationId'
,
createJobApplication: '/v1/jobapplications'
,
listJobApplications: '/v1/jobapplications'
}
};
Networking Axios Configuration
import axios from 'axios';
import { CONFIG } from 'src/global-config';
const networkingAxiosInstance = axios.create({
baseURL: CONFIG.networkingServiceUrl
});
networkingAxiosInstance.interceptors.response.use(
(response) => response,
(error) => Promise.reject((error.response && error.response.data) || 'Something went wrong!')
);
export default networkingAxiosInstance;
Fetcher Utility
export const fetcher = async (args) => {
try {
const [url, config] = Array.isArray(args) ? args : [args];
const res = await networkingAxiosInstance.get(url, { ...config });
return res.data;
} catch (error) {
console.error('Failed to fetch:', error);
throw error;
}
};
Service Endpoints
export const networkingEndpoints = {
connection: {
createConnection: '/v1/connections'
,
listConnections: '/v1/connections'
,
deleteConnection: '/v1/connections/:connectionId'
,
getConnection: '/v1/connections/:connectionId'
},
connectionRequest: {
deleteConnectionRequest: '/v1/connectionrequests/:connectionRequestId'
,
updateConnectionRequest: '/v1/connectionrequests/:connectionRequestId'
,
listConnectionRequests: '/v1/connectionrequests'
,
createConnectionRequest: '/v1/connectionrequests'
,
getConnectionRequest: '/v1/connectionrequests/:connectionRequestId'
}
};
Company Axios Configuration
import axios from 'axios';
import { CONFIG } from 'src/global-config';
const companyAxiosInstance = axios.create({
baseURL: CONFIG.companyServiceUrl
});
companyAxiosInstance.interceptors.response.use(
(response) => response,
(error) => Promise.reject((error.response && error.response.data) || 'Something went wrong!')
);
export default companyAxiosInstance;
Fetcher Utility
export const fetcher = async (args) => {
try {
const [url, config] = Array.isArray(args) ? args : [args];
const res = await companyAxiosInstance.get(url, { ...config });
return res.data;
} catch (error) {
console.error('Failed to fetch:', error);
throw error;
}
};
Service Endpoints
export const companyEndpoints = {
companyFollower: {
followCompany: '/v1/followcompany'
,
unfollowCompany: '/v1/unfollowcompany/:companyFollowerId'
,
listCompanyFollowers: '/v1/companyfollowers'
,
getCompanyFollower: '/v1/companyfollowers/:companyFollowerId'
},
companyUpdate: {
getCompanyUpdate: '/v1/companyupdates/:companyUpdateId'
,
createCompanyUpdate: '/v1/companyupdates'
,
updateCompanyUpdate: '/v1/companyupdates/:companyUpdateId'
,
deleteCompanyUpdate: '/v1/companyupdates/:companyUpdateId'
,
listCompanyUpdates: '/v1/companyupdates'
},
company: {
createCompany: '/v1/companies'
,
getCompany: '/v1/companies/:companyId'
,
listCompanies: '/v1/companies'
,
updateCompany: '/v1/companies/:companyId'
,
deleteCompany: '/v1/companies/:companyId'
},
companyAdmin: {
getCompanyAdmin: '/v1/companyadmins/:companyAdminId'
,
removeCompanyAdmin: '/v1/removecompanyadmin/:companyAdminId'
,
assignCompanyAdmin: '/v1/assigncompanyadmin'
,
listCompanyAdmins: '/v1/companyadmins'
}
};
Content Axios Configuration
import axios from 'axios';
import { CONFIG } from 'src/global-config';
const contentAxiosInstance = axios.create({
baseURL: CONFIG.contentServiceUrl
});
contentAxiosInstance.interceptors.response.use(
(response) => response,
(error) => Promise.reject((error.response && error.response.data) || 'Something went wrong!')
);
export default contentAxiosInstance;
Fetcher Utility
export const fetcher = async (args) => {
try {
const [url, config] = Array.isArray(args) ? args : [args];
const res = await contentAxiosInstance.get(url, { ...config });
return res.data;
} catch (error) {
console.error('Failed to fetch:', error);
throw error;
}
};
Service Endpoints
export const contentEndpoints = {
post: {
createPost: '/v1/posts'
,
listPosts: '/v1/posts'
,
getPost: '/v1/posts/:postId'
,
deletePost: '/v1/posts/:postId'
,
updatePost: '/v1/posts/:postId'
,
listUserPosts: '/v1/userposts'
},
like: {
likePost: '/v1/likepost'
,
listLikes: '/v1/likes'
,
unlikePost: '/v1/unlikepost/:likeId'
},
comment: {
updateComment: '/v1/comments/:commentId'
,
createComment: '/v1/comments'
,
listComments: '/v1/comments'
,
getComment: '/v1/comments/:commentId'
,
deleteComment: '/v1/comments/:commentId'
}
};
Messaging Axios Configuration
import axios from 'axios';
import { CONFIG } from 'src/global-config';
const messagingAxiosInstance = axios.create({
baseURL: CONFIG.messagingServiceUrl
});
messagingAxiosInstance.interceptors.response.use(
(response) => response,
(error) => Promise.reject((error.response && error.response.data) || 'Something went wrong!')
);
export default messagingAxiosInstance;
Fetcher Utility
export const fetcher = async (args) => {
try {
const [url, config] = Array.isArray(args) ? args : [args];
const res = await messagingAxiosInstance.get(url, { ...config });
return res.data;
} catch (error) {
console.error('Failed to fetch:', error);
throw error;
}
};
Service Endpoints
export const messagingEndpoints = {
message: {
listMessages: '/v1/messages'
,
getMessage: '/v1/messages/:messageId'
,
updateMessage: '/v1/messages/:messageId'
,
deleteMessage: '/v1/messages/:messageId'
,
createMessage: '/v1/messages'
},
conversation: {
updateConversation: '/v1/conversations/:conversationId'
,
getConversation: '/v1/conversations/:conversationId'
,
deleteConversation: '/v1/conversations/:conversationId'
,
listConversations: '/v1/conversations'
,
createConversation: '/v1/conversations'
}
};
Profile Axios Configuration
import axios from 'axios';
import { CONFIG } from 'src/global-config';
const profileAxiosInstance = axios.create({
baseURL: CONFIG.profileServiceUrl
});
profileAxiosInstance.interceptors.response.use(
(response) => response,
(error) => Promise.reject((error.response && error.response.data) || 'Something went wrong!')
);
export default profileAxiosInstance;
Fetcher Utility
export const fetcher = async (args) => {
try {
const [url, config] = Array.isArray(args) ? args : [args];
const res = await profileAxiosInstance.get(url, { ...config });
return res.data;
} catch (error) {
console.error('Failed to fetch:', error);
throw error;
}
};
Service Endpoints
export const profileEndpoints = {
profile: {
updateProfile: '/v1/profiles/:profileId'
,
deleteProfile: '/v1/profiles/:profileId'
,
listProfiles: '/v1/profiles'
,
createProfile: '/v1/profiles'
,
getProfile: '/v1/profiles/:profileId'
},
premiumsubscription: {
deletePremuimSub: '/v1/premuimsub/:premiumsubscriptionId'
,
createPremuimSub: '/v1/premuimsub'
,
updatePremuimSub: '/v1/premuimsub/:premiumsubscriptionId'
,
getPremuimSub: '/v1/premuimsub/:premiumsubscriptionId'
,
listPremuimSub: '/v1/premuimsub'
,
startPremiumsubscriptionPayment: '/v1/startpremiumsubscriptionpayment/:premiumsubscriptionId'
,
refreshPremiumsubscriptionPayment: '/v1/refreshpremiumsubscriptionpayment/:premiumsubscriptionId'
,
callbackPremiumsubscriptionPayment: '/v1/callbackpremiumsubscriptionpayment'
},
certification: {
updateCertification: '/v1/certifications/:certificationId'
,
listCertifications: '/v1/certifications'
,
createCertification: '/v1/certifications'
,
getCertification: '/v1/certifications/:certificationId'
,
deleteCertification: '/v1/certifications/:certificationId'
},
language: {
deleteLanguage: '/v1/languages/:languageId'
,
updateLanguage: '/v1/languages/:languageId'
,
listLanguages: '/v1/languages'
,
getLanguage: '/v1/languages/:languageId'
,
createLanguage: '/v1/languages'
},
sys_premiumsubscriptionPayment: {
getPremiumsubscriptionPayment2: '/v1/premiumsubscriptionpayment2/:sys_premiumsubscriptionPaymentId'
,
listPremiumsubscriptionPayments2: '/v1/premiumsubscriptionpayments2'
,
createPremiumsubscriptionPayment: '/v1/premiumsubscriptionpayment'
,
updatePremiumsubscriptionPayment: '/v1/premiumsubscriptionpayment/:sys_premiumsubscriptionPaymentId'
,
deletePremiumsubscriptionPayment: '/v1/premiumsubscriptionpayment/:sys_premiumsubscriptionPaymentId'
,
listPremiumsubscriptionPayments2: '/v1/premiumsubscriptionpayments2'
,
getPremiumsubscriptionPaymentByOrderId: '/v1/premiumsubscriptionpaymentbyorderid/:orderId'
,
getPremiumsubscriptionPaymentByPaymentId: '/v1/premiumsubscriptionpaymentbypaymentid/:paymentId'
,
getPremiumsubscriptionPayment2: '/v1/premiumsubscriptionpayment2/:sys_premiumsubscriptionPaymentId'
},
sys_paymentCustomer: {
getPaymentCustomerByUserId: '/v1/paymentcustomers/:userId'
,
listPaymentCustomers: '/v1/paymentcustomers'
},
sys_paymentMethod: {
listPaymentCustomerMethods: '/v1/paymentcustomermethods/:userId'
}
};
Auth Axios Configuration
import axios from 'axios';
import { CONFIG } from 'src/global-config';
const authAxiosInstance = axios.create({
baseURL: CONFIG.authServiceUrl
});
authAxiosInstance.interceptors.response.use(
(response) => response,
(error) => Promise.reject((error.response && error.response.data) || 'Something went wrong!')
);
export default authAxiosInstance;
Fetcher Utility
export const fetcher = async (args) => {
try {
const [url, config] = Array.isArray(args) ? args : [args];
const res = await authAxiosInstance.get(url, { ...config });
return res.data;
} catch (error) {
console.error('Failed to fetch:', error);
throw error;
}
};
Service Endpoints
export const authEndpoints = {
login: "/login",
me: "/v1/users/:userId",
logout: "/logout",
user: {
getUser: '/v1/users/:userId'
,
updateUser: '/v1/users/:userId'
,
updateProfile: '/v1/profile/:userId'
,
createUser: '/v1/users'
,
deleteUser: '/v1/users/:userId'
,
archiveProfile: '/v1/archiveprofile/:userId'
,
listUsers: '/v1/users'
,
searchUsers: '/v1/searchusers'
,
updateUserRole: '/v1/userrole/:userId'
,
updateUserPassword: '/v1/userpassword/:userId'
,
updateUserPasswordByAdmin: '/v1/userpasswordbyadmin/:userId'
,
getBriefUser: '/v1/briefuser/:userId'
,
registerUser: '/v1/registeruser'
}
};
Service Integration
JobApplication Service Integration
The JobApplication service is integrated using:
- Service-specific Axios instance with base URL configuration
- Dynamic endpoint generation based on business logic
- Error handling through response interceptors
- Fetcher utility for data retrieval
Available Endpoints:
-
JobPostingdata object management -
JobApplicationdata object management
Networking Service Integration
The Networking service is integrated using:
- Service-specific Axios instance with base URL configuration
- Dynamic endpoint generation based on business logic
- Error handling through response interceptors
- Fetcher utility for data retrieval
Available Endpoints:
-
Connectiondata object management -
ConnectionRequestdata object management
Company Service Integration
The Company service is integrated using:
- Service-specific Axios instance with base URL configuration
- Dynamic endpoint generation based on business logic
- Error handling through response interceptors
- Fetcher utility for data retrieval
Available Endpoints:
-
CompanyFollowerdata object management -
CompanyUpdatedata object management -
Companydata object management -
CompanyAdmindata object management
Content Service Integration
The Content service is integrated using:
- Service-specific Axios instance with base URL configuration
- Dynamic endpoint generation based on business logic
- Error handling through response interceptors
- Fetcher utility for data retrieval
Available Endpoints:
-
Postdata object management -
Likedata object management -
Commentdata object management
Messaging Service Integration
The Messaging service is integrated using:
- Service-specific Axios instance with base URL configuration
- Dynamic endpoint generation based on business logic
- Error handling through response interceptors
- Fetcher utility for data retrieval
Available Endpoints:
-
Messagedata object management -
Conversationdata object management
Profile Service Integration
The Profile service is integrated using:
- Service-specific Axios instance with base URL configuration
- Dynamic endpoint generation based on business logic
- Error handling through response interceptors
- Fetcher utility for data retrieval
Available Endpoints:
-
Profiledata object management -
Premiumsubscriptiondata object management -
Certificationdata object management -
Languagedata object management -
Sys_premiumsubscriptionPaymentdata object management -
Sys_paymentCustomerdata object management -
Sys_paymentMethoddata object management
Auth Service Integration
The Auth service is integrated using:
- Service-specific Axios instance with base URL configuration
- Dynamic endpoint generation based on business logic
- Error handling through response interceptors
- Fetcher utility for data retrieval
Available Endpoints:
-
Userdata object management
Request/Response Patterns
Standard Request Format
Request Structure
// Simple GET request
const response = await fetcher('/endpoint');
// GET request with parameters
const response = await fetcher(['/endpoint', { params: { id: 1 } }]);
// POST request
const response = await jobApplicationAxiosInstance.post('/endpoint', data);
// Simple GET request
const response = await fetcher('/endpoint');
// GET request with parameters
const response = await fetcher(['/endpoint', { params: { id: 1 } }]);
// POST request
const response = await networkingAxiosInstance.post('/endpoint', data);
// Simple GET request
const response = await fetcher('/endpoint');
// GET request with parameters
const response = await fetcher(['/endpoint', { params: { id: 1 } }]);
// POST request
const response = await companyAxiosInstance.post('/endpoint', data);
// Simple GET request
const response = await fetcher('/endpoint');
// GET request with parameters
const response = await fetcher(['/endpoint', { params: { id: 1 } }]);
// POST request
const response = await contentAxiosInstance.post('/endpoint', data);
// Simple GET request
const response = await fetcher('/endpoint');
// GET request with parameters
const response = await fetcher(['/endpoint', { params: { id: 1 } }]);
// POST request
const response = await messagingAxiosInstance.post('/endpoint', data);
// Simple GET request
const response = await fetcher('/endpoint');
// GET request with parameters
const response = await fetcher(['/endpoint', { params: { id: 1 } }]);
// POST request
const response = await profileAxiosInstance.post('/endpoint', data);
// Simple GET request
const response = await fetcher('/endpoint');
// GET request with parameters
const response = await fetcher(['/endpoint', { params: { id: 1 } }]);
// POST request
const response = await authAxiosInstance.post('/endpoint', data);
Response Handling
Standard Response Format
// Success response
const response = await fetcher('/endpoint');
// response contains the data directly
// Error handling
try {
const response = await fetcher('/endpoint');
} catch (error) {
console.error('API Error:', error);
// Error is already processed by the interceptor
}
Pagination Handling
Pagination Implementation
// Pagination is handled by the data grid component
// The MUI DataGrid handles pagination automatically
Error Handling Patterns
Error Classification
Error Types
// Basic error handling through Axios interceptors
// Errors are processed and simplified before reaching components
Error Handler
Centralized Error Handling
class APIErrorHandler {
handleError(error) {
if (error.response) {
// Server responded with error status
return this.handleServerError(error);
} else if (error.request) {
// Network error
return this.handleNetworkError(error);
} else {
// Other error
return this.handleUnknownError(error);
}
}
handleServerError(error) {
const { status, data } = error.response;
switch (status) {
case 400:
return new ValidationError(
data.message || 'Validation failed',
data.errors || []
);
case 401:
return new AuthenticationError(
data.message || 'Authentication required'
);
case 403:
return new AuthorizationError(
data.message || 'Access denied'
);
case 404:
return new APIError(
data.message || 'Resource not found',
404,
'NOT_FOUND'
);
case 429:
return new APIError(
data.message || 'Rate limit exceeded',
429,
'RATE_LIMIT'
);
case 500:
return new APIError(
data.message || 'Internal server error',
500,
'SERVER_ERROR'
);
default:
return new APIError(
data.message || 'Unknown server error',
status,
'UNKNOWN_ERROR'
);
}
}
handleNetworkError(error) {
return new NetworkError(
'Network error occurred',
error
);
}
handleUnknownError(error) {
return new APIError(
error.message || 'Unknown error occurred',
0,
'UNKNOWN_ERROR'
);
}
}
Retry Mechanisms
Exponential Backoff Retry
class RetryManager {
constructor(options = {}) {
this.maxRetries = options.maxRetries || 3;
this.baseDelay = options.baseDelay || 1000;
this.maxDelay = options.maxDelay || 10000;
this.retryableStatusCodes = options.retryableStatusCodes || [408, 429, 500, 502, 503, 504];
}
async executeWithRetry(operation, context = {}) {
let lastError;
for (let attempt = 0; attempt <= this.maxRetries; attempt++) {
try {
return await operation();
} catch (error) {
lastError = error;
if (attempt === this.maxRetries || !this.shouldRetry(error)) {
break;
}
const delay = this.calculateDelay(attempt);
await this.sleep(delay);
}
}
throw lastError;
}
shouldRetry(error) {
return false;
}
calculateDelay(attempt) {
return 0;
}
sleep(ms) {
return Promise.resolve();
}
}
Performance Optimization
Request Batching
Batch Request Manager
class BatchRequestManager {
constructor(apiClient) {
this.apiClient = apiClient;
this.pendingRequests = new Map();
this.batchTimeout = 100; // 100ms
}
async batchRequest(endpoint, data, options = {}) {
const batchKey = this.generateBatchKey(endpoint, options);
if (!this.pendingRequests.has(batchKey)) {
this.pendingRequests.set(batchKey, []);
}
const request = {
data: data,
resolve: null,
reject: null,
timestamp: Date.now()
};
const promise = new Promise((resolve, reject) => {
request.resolve = resolve;
request.reject = reject;
});
this.pendingRequests.get(batchKey).push(request);
// Process batch after timeout
setTimeout(() => this.processBatch(batchKey), this.batchTimeout);
return promise;
}
async processBatch(batchKey) {
const requests = this.pendingRequests.get(batchKey);
if (!requests || requests.length === 0) return;
this.pendingRequests.delete(batchKey);
try {
const [serviceName, endpoint] = batchKey.split(':');
const batchData = requests.map(req => req.data);
const response = await this.apiClient.post(`/${endpoint}/batch`, {
requests: batchData
});
requests.forEach((request, index) => {
if (response.data.results[index].success) {
request.resolve(response.data.results[index].data);
} else {
request.reject(new Error(response.data.results[index].error));
}
});
} catch (error) {
requests.forEach(request => {
request.reject(error);
});
}
}
}