The GraphRequest class represents a single request to the Facebook Graph API and provides support for batch requests through GraphRequestManager.
Import
import { GraphRequest } from 'react-native-fbsdk-next';
Constructor
new GraphRequest(
graphPath: string,
config?: GraphRequestConfig,
callback?: GraphRequestCallback
)
The Graph API endpoint to call (e.g., “me”, “me/friends”, “12345/posts”).
Optional configuration for the request including HTTP method, API version, parameters, and access token.
Function called when the request completes or fails.
Properties
graphPath
The Graph API endpoint for this request.
config
The configuration object for this request.
config: GraphRequestConfig
callback
The completion callback for this request.
callback: GraphRequestCallback
Methods
addStringParameter
Adds a string parameter to the request.
addStringParameter(paramString: string, key: string): void
Usage Examples
Simple GET Request
import { GraphRequest, GraphRequestManager } from 'react-native-fbsdk-next';
const request = new GraphRequest(
'/me',
null,
(error, result) => {
if (error) {
console.log('Error fetching data:', error);
} else {
console.log('User data:', result);
}
}
);
new GraphRequestManager().addRequest(request).start();
GET Request with Parameters
const request = new GraphRequest(
'/me',
{
httpMethod: 'GET',
version: 'v18.0',
parameters: {
fields: {
string: 'id,name,email,picture',
},
},
},
(error, result) => {
if (error) {
console.log('Error:', error);
} else {
console.log('Result:', result);
}
}
);
new GraphRequestManager().addRequest(request).start();
POST Request
const request = new GraphRequest(
'/me/feed',
{
httpMethod: 'POST',
parameters: {
message: {
string: 'Hello from my React Native app!',
},
},
},
(error, result) => {
if (error) {
console.log('Post failed:', error);
} else {
console.log('Post ID:', result?.id);
}
}
);
new GraphRequestManager().addRequest(request).start();
Request with Custom Access Token
const request = new GraphRequest(
'/me',
{
accessToken: 'custom_access_token_here',
parameters: {
fields: {
string: 'id,name',
},
},
},
(error, result) => {
if (error) {
console.log('Error:', error);
} else {
console.log('Result:', result);
}
}
);
new GraphRequestManager().addRequest(request).start();
Using addStringParameter
const request = new GraphRequest(
'/me',
{
parameters: {},
},
(error, result) => {
if (error) {
console.log('Error:', error);
} else {
console.log('Result:', result);
}
}
);
// Add parameters after construction
request.addStringParameter('id,name,email', 'fields');
new GraphRequestManager().addRequest(request).start();
Fetch User Friends
const request = new GraphRequest(
'/me/friends',
{
parameters: {
fields: {
string: 'id,name,picture',
},
limit: {
string: '100',
},
},
},
(error, result) => {
if (error) {
console.log('Error fetching friends:', error);
} else {
console.log('Friends:', result?.data);
}
}
);
new GraphRequestManager().addRequest(request).start();
Fetch User Photos
const request = new GraphRequest(
'/me/photos',
{
httpMethod: 'GET',
parameters: {
fields: {
string: 'id,picture,created_time',
},
type: {
string: 'uploaded',
},
},
},
(error, result) => {
if (error) {
console.log('Error fetching photos:', error);
} else {
console.log('Photos:', result?.data);
}
}
);
new GraphRequestManager().addRequest(request).start();
TypeScript Types
GraphRequestConfig
Configuration object for Graph API requests.
type GraphRequestConfig = {
/**
* The HTTP method to use (e.g., "GET", "POST", "DELETE")
*/
httpMethod?: string;
/**
* The Graph API version to use (e.g., "v18.0")
*/
version?: string;
/**
* Request parameters as key-value pairs
*/
parameters?: GraphRequestParameters;
/**
* Access token for the request
*/
accessToken?: string;
};
GraphRequestParameters
Parameters for Graph API requests.
type GraphRequestParameters = {
[key: string]: unknown;
};
When setting parameters, wrap values in an object with a string property:parameters: {
fields: { string: 'id,name,email' },
limit: { string: '10' },
}
GraphRequestCallback
Callback function for handling request results.
type GraphRequestCallback = (
error?: Record<string, unknown>,
result?: Record<string, unknown>
) => void;
Error object if the request failed, undefined otherwise.
Response data if the request succeeded, undefined otherwise.
Best Practices
- Always handle errors in your callback function
- Use specific field selectors to request only the data you need
- Specify API version in config for consistent behavior
- Batch multiple requests using
GraphRequestManager for better performance
- Check Graph API documentation for available endpoints and parameters
