The GraphRequestManager class manages the execution of one or more Graph API requests, with support for batch processing and callbacks.
Import
import { GraphRequestManager } from 'react-native-fbsdk-next';
Constructor
new GraphRequestManager()
Properties
requestBatch
Array of requests to be executed.
requestBatch: Array<GraphRequest>
requestCallbacks
Array of callbacks corresponding to each request.
requestCallbacks: Array<Callback | undefined>
batchCallback
Optional callback invoked when the entire batch completes.
batchCallback: Callback | null
Methods
addRequest
Adds a Graph API request to the batch.
addRequest(request: GraphRequest): GraphRequestManager
The request to add to the batch.
addBatchCallback
Sets a callback to be invoked when the entire batch finishes executing.
addBatchCallback(
callback: (error?: Record<string, unknown>, result?: Record<string, unknown>) => void
): GraphRequestManager
callback
(error?, result?) => void
required
Function called when the batch completes. Only one batch callback can be set.
The batch callback indicates that execution has finished, not that every request succeeded. Check individual request callbacks for per-request status.
start
Executes all requests in the batch.
start(timeout?: number): void
Optional timeout in milliseconds. Defaults to 0 (no timeout).
Network error handling differs between platforms:
- iOS: Batch callback returns an error if the batch fails due to network issues
- Android: Batch callback always returns
{"result": "batch finished executing"} after timeout, even with network errors
For network status detection on Android, use React Native’s NetInfo module instead. Usage Examples
Single Request
import { GraphRequest, GraphRequestManager } from 'react-native-fbsdk-next';
const request = new GraphRequest(
'/me',
null,
(error, result) => {
if (error) {
console.log('Error:', error);
} else {
console.log('User:', result);
}
}
);
const manager = new GraphRequestManager();
manager.addRequest(request).start();
Multiple Requests (Batch)
const userRequest = new GraphRequest(
'/me',
{
parameters: {
fields: { string: 'id,name,email' },
},
},
(error, result) => {
if (error) {
console.log('User request error:', error);
} else {
console.log('User:', result);
}
}
);
const friendsRequest = new GraphRequest(
'/me/friends',
null,
(error, result) => {
if (error) {
console.log('Friends request error:', error);
} else {
console.log('Friends:', result);
}
}
);
const photosRequest = new GraphRequest(
'/me/photos',
{
parameters: {
limit: { string: '10' },
},
},
(error, result) => {
if (error) {
console.log('Photos request error:', error);
} else {
console.log('Photos:', result);
}
}
);
const manager = new GraphRequestManager();
manager
.addRequest(userRequest)
.addRequest(friendsRequest)
.addRequest(photosRequest)
.start();
With Batch Callback
const request1 = new GraphRequest(
'/me',
null,
(error, result) => {
console.log('Request 1:', error || result);
}
);
const request2 = new GraphRequest(
'/me/friends',
null,
(error, result) => {
console.log('Request 2:', error || result);
}
);
const manager = new GraphRequestManager();
manager
.addRequest(request1)
.addRequest(request2)
.addBatchCallback((error, result) => {
if (error) {
console.log('Batch failed:', error);
} else {
console.log('Batch completed:', result);
}
})
.start();
With Timeout
const request = new GraphRequest(
'/me',
null,
(error, result) => {
if (error) {
console.log('Request error:', error);
} else {
console.log('Result:', result);
}
}
);
const manager = new GraphRequestManager();
manager.addRequest(request).start(5000); // 5 second timeout
Complex Batch with Error Handling
import { GraphRequest, GraphRequestManager } from 'react-native-fbsdk-next';
const fetchUserData = () => {
const requests = [
{ path: '/me', name: 'user' },
{ path: '/me/friends', name: 'friends' },
{ path: '/me/albums', name: 'albums' },
];
const results: Record<string, any> = {};
let completedRequests = 0;
const manager = new GraphRequestManager();
requests.forEach(({ path, name }) => {
const request = new GraphRequest(
path,
null,
(error, result) => {
completedRequests++;
if (error) {
console.log(`Error fetching ${name}:`, error);
results[name] = { error };
} else {
console.log(`Fetched ${name}:`, result);
results[name] = result;
}
if (completedRequests === requests.length) {
console.log('All requests completed:', results);
}
}
);
manager.addRequest(request);
});
manager.addBatchCallback((error, result) => {
if (error) {
console.log('Batch error:', error);
} else {
console.log('Batch finished:', result);
}
});
manager.start();
};
fetchUserData();
Loading State Management
import React, { useState } from 'react';
import { GraphRequest, GraphRequestManager } from 'react-native-fbsdk-next';
const UserProfile = () => {
const [loading, setLoading] = useState(false);
const [userData, setUserData] = useState(null);
const [error, setError] = useState(null);
const loadUserProfile = () => {
setLoading(true);
setError(null);
const request = new GraphRequest(
'/me',
{
parameters: {
fields: { string: 'id,name,email,picture' },
},
},
(error, result) => {
if (error) {
setError(error);
setUserData(null);
} else {
setUserData(result);
setError(null);
}
}
);
const manager = new GraphRequestManager();
manager
.addRequest(request)
.addBatchCallback(() => {
setLoading(false);
})
.start();
};
return (
// Your component JSX here
);
};
TypeScript Types
Callback
type Callback = (
error?: Record<string, unknown>,
result?: Record<string, unknown>
) => void;
Error object if the operation failed, undefined otherwise.
Response data if the operation succeeded, undefined otherwise.
Method Chaining
All configuration methods return the manager instance, allowing fluent method chaining:
new GraphRequestManager()
.addRequest(request1)
.addRequest(request2)
.addRequest(request3)
.addBatchCallback((error, result) => {
console.log('Done!');
})
.start(10000);
- Reduced network overhead - Single HTTP request for multiple Graph API calls
- Lower latency - Parallel execution of independent requests
- Better resource usage - Fewer round trips to Facebook servers
- Cleaner code - Centralized completion handling
Best Practices
- Batch related requests together when possible
- Set appropriate timeouts for your network conditions
- Handle individual request errors in addition to batch errors
- Use batch callbacks for loading state management
- Limit batch size to avoid excessively long requests (Facebook recommends max 50 requests per batch)
- Check platform differences for network error handling
