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.
See Also

Configuration

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.