DevExtreme React - ODataContext API

The ODataContext is an object that provides access to an entire OData service.

import ODataContext from "devextreme/data/odata/context"

This object creates several ODataStore instances. Each instance accesses an individual entity collection.

jQuery
JavaScript
var context = new DevExpress.data.ODataContext({
    url: "http://www.example.com/Northwind.svc",
    entities: {
        Categories: {
            key: "CategoryID",
            keyType: "Int32"
        },
        // An entity collection alias
        Clients: {
            name: "Customers",
            key: "CustomerID",
            keyType: "String"
        },
        Products: {
            // A composite key
            key: ["ProductID", "ProductCode"],
            keyType: {
                ProductID: "Guid",
                ProductCode: "Int32" 
            }
        }
    }
});
Angular
TypeScript
import ODataContext from "devextreme/data/odata/context";
// ...
export class AppComponent {
    context: ODataContext;
    constructor () {
        this.context = new ODataContext({
            url: "http://www.example.com/Northwind.svc",
            entities: {
                Categories: {
                    key: "CategoryID",
                    keyType: "Int32"
                },
                // An entity collection alias
                Clients: {
                    name: "Customers",
                    key: "CustomerID",
                    keyType: "String"
                },
                Products: {
                    // A composite key
                    key: ["ProductID", "ProductCode"],
                    keyType: {
                        ProductID: "Guid",
                        ProductCode: "Int32" 
                    }
                }
            }
        });
    }
}
AngularJS
JavaScript
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        $scope.context = new DevExpress.data.ODataContext({
            url: "http://www.example.com/Northwind.svc",
            entities: {
                Categories: {
                    key: "CategoryID",
                    keyType: "Int32"
                },
                // An entity collection alias
                Clients: {
                    name: "Customers",
                    key: "CustomerID",
                    keyType: "String"
                },
                Products: {
                    // A composite key
                    key: ["ProductID", "ProductCode"],
                    keyType: {
                        ProductID: "Guid",
                        ProductCode: "Int32" 
                    }
                }
            }
        })
    });
Knockout
JavaScript
  
var viewModel = {
    context: new DevExpress.data.ODataContext({
        url: "http://www.example.com/Northwind.svc",
        entities: {
            Categories: {
                key: "CategoryID",
                keyType: "Int32"
            },
            // An entity collection alias
            Clients: {
                name: "Customers",
                key: "CustomerID",
                keyType: "String"
            },
            Products: {
                // A composite key
                key: ["ProductID", "ProductCode"],
                keyType: {
                    ProductID: "Guid",
                    ProductCode: "Int32" 
                }
            }
        }
    })
};

ko.applyBindings(viewModel);
Vue
App.vue
<script>
import ODataContext from 'devextreme/data/odata/context';

const context = new ODataContext({
    url: 'http://www.example.com/Northwind.svc',
    entities: {
        Categories: {
            key: 'CategoryID',
            keyType: 'Int32'
        },
        // An entity collection alias
        Clients: {
            name: 'Customers',
            key: 'CustomerID',
            keyType: 'String'
        },
        Products: {
            // A composite key
            key: ['ProductID', 'ProductCode'],
            keyType: {
                ProductID: 'Guid',
                ProductCode: 'Int32' 
            }
        }
    }
});

export default {
    // ...
}
</script>
React
App.js
// ...
import ODataContext from 'devextreme/data/odata/context';

const context = new ODataContext({
    url: 'http://www.example.com/Northwind.svc',
    entities: {
        Categories: {
            key: 'CategoryID',
            keyType: 'Int32'
        },
        // An entity collection alias
        Clients: {
            name: 'Customers',
            key: 'CustomerID',
            keyType: 'String'
        },
        Products: {
            // A composite key
            key: ['ProductID', 'ProductCode'],
            keyType: {
                ProductID: 'Guid',
                ProductCode: 'Int32' 
            }
        }
    }
});

class App extends React.Component {
    // ...
}
export default App;
NOTE
The ODataContext is immutable. You cannot change its configuration at runtime. However, you can use its methods to manipulate it.

A 1-Click Solution for CRUD Web API Services with Role-based Access Control via EF Core & XPO

If you target .NET for your backend API, be sure to check out Web API Service and register your free copy today. The Solution Wizard scaffolds an OData v4 Web API Service (.NET 6+) with integrated authorization & CRUD operations powered by EF Core and our XPO ORM library. You can use OAuth2, JWT or custom authentication strategies alongside tools like Postman or Swagger (OpenAPI) for API testing.

The built-in Web API Service also filters out secured server data based on permissions granted to users. Advanced/enterprise functions include audit trail, endpoints to download reports, file attachments, check validation, obtain localized captions, etc.

To use the free Solution Wizard (which creates the Web API Service) run the Universal Component Installer from the DevExpress Download Manager.

See Also

Props

This section describes the ODataContext's configuration properties.

Name Description
beforeSend

Specifies a function that customizes the request before it is sent to the server.
deserializeDates

Specifies whether stores in the ODataContext serialize/parse date-time values.
entities

Specifies entity collections to be accessed.
errorHandler

Specifies a function that is executed when the ODataContext throws an error.
filterToLower

Specifies whether to convert string values to lowercase in filter and search requests. Applies to the following operations: "startswith", "endswith", "contains", and "notcontains".
jsonp

Specifies whether data should be sent using JSONP.
url

Specifies the URL of an OData service.
version

Specifies the OData version.
withCredentials

Specifies whether to send cookies, authorization headers, and client certificates in a cross-origin request.

Methods

This section describes the methods that control the ODataContext.

Name Description
get(operationName, params)

Invokes an OData operation that returns a value.
invoke(operationName, params, httpMethod)

Invokes an OData operation that returns nothing.
objectLink(entityAlias, key)

Gets a link to an entity with a specific key.