GraphRequest

Make requests to the Facebook Graph API

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
)

graphPath · string · required

The Graph API endpoint to call (e.g., “me”, “me/friends”, “12345/posts”).

config · GraphRequestConfig

Optional configuration for the request including HTTP method, API version, parameters, and access token.

callback · GraphRequestCallback

Function called when the request completes or fails.

Properties

graphPath

The Graph API endpoint for this request.

graphPath: string

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

paramString · string · required

The parameter value.

key · string · required

The parameter key.

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 · Record<string, unknown>

Error object if the request failed, undefined otherwise.

result · Record<string, unknown>

Response data if the request succeeded, undefined otherwise.

Best Practices

1. Always handle errors in your callback function
2. Use specific field selectors to request only the data you need
3. Specify API version in config for consistent behavior
4. Batch multiple requests using GraphRequestManager for better performance
5. Check Graph API documentation for available endpoints and parameters

Related

• GraphRequestManager - Execute single or batch requests
• Facebook Graph API Documentation