{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":1283,"path":"api-reference/web-services/query-schema-from-component.md","title":"Query a GraphQL schema from a component","bundle":null,"doc_type":null,"release":"australia","body":"\n# Query a GraphQL schema from a component\n\nAccess record data in a component by querying your scripted GraphQL schema.\n\n## Before you begin\n\nRole required: admin\n\n1.  [Create a GraphQL schema](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/api-reference/web-services/build-graphql-scripted-schema.md).\n2.  [Test GraphQL APIs with GraphQL Explorer](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/api-reference/web-services/test-gql-schema.md).\n3.  [Disable introspective queries in your production environment](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/api-reference/web-services/graphql-properties.md).\n4.  [Create a custom component](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/application-development/custom-components.md).\n\n## Procedure\n\n1.  Navigate to your component directory.\n\n2.  Define the query in your component's `index.js` file.\n\n    -   **Remove introspective queries**\n\n        Do not use introspective queries for components deployed in a production environment.\n\n    -   **Include applicable namespaces**\n\n        Include both the application and schema namespaces in the query.\n\n    -   **Defer slow-responding fields**\n\n        You can apply the `@defer` query directive to a fragment to delay the processing of one or more slow-responding fields. Deferring slow-responding fields allows the query to return other fields first.\n\n        **Warning:** Avoid applying this query directive indiscriminately as it can also cause performance degradations. Conduct performance testing to determine which fields can be deferred for better performance.\n\n    **Note:**\n\n    ```\n    const incidentQuery = `query ($sys_id: String!) {\n        query (sys_id: $sys_id) {\n            incident {\n                _results {\n                    sys_id {\n                        displayValue\n                    }\n                }\n            }\n        }\n    }`;\n    ```\n\n3.  Add the following line to the top of the script to import the createGraphQLEffect API into your component.\n\n    ```\n    import {createGraphQLEffect} from '@servicenow/ui-effect-graphql';\n    ```\n\n4.  Call the query using the `createGraphQLEffect` API. To learn more about this API, see the [Developer Site](https://developer.servicenow.com/dev.do#!/guide/sandiego/now-experience/ui-framework/api-reference/effect-graphql).\n\n5.  Create action handlers to manage the result of the query.\n\n    ```\n    actionHandlers: {\n       [DATA_FETCH_REQUESTED]: dataFetchHandler,\n       [DATA_FETCH_STARTED]: ({updateState}) => updateState({loading: true}),\n       [DATA_FETCH_SUCCEEDED]: ({action, updateState}) => updateState({data: action.payload}),\n       [DATA_FETCH_FAILED]: () => { /* handle network error */ },\n     }\n    ```\n\n\n## Example\n\nThis example shows a complete component including the query, the GraphQL API call, and action handlers to manage the response.\n\n```\nimport {createCustomElement} from '@servicenow/ui-core';\nimport snabbdom from '@servicenow/ui-renderer-snabbdom';\nimport {createGraphQLEffect} from '@servicenow/ui-effect-graphql';\n\nconst GQL_QUERY = `\nquery query ($active: Boolean) {\n    now {\n        mySchema (active: $active) {\n            myField {\n                value\n            }\n         }\n    }\n}`;\n  \nconst DATA_FETCH_REQUESTED = 'DATA_FETCH_REQUESTED';\nconst DATA_FETCH_STARTED = 'DATA_FETCH_STARTED';\nconst DATA_FETCH_SUCCEEDED = 'DATA_FETCH_SUCCEEDED';\nconst DATA_FETCH_FAILED = 'DATA_FETCH_FAILED';\n  \nconst dataFetchHandler = createGraphQLEffect(GQL_QUERY, {\n  variableList: ['active'],\n  startActionType: DATA_FETCH_STARTED,    // gql http request started\n  successActionType: DATA_FETCH_SUCCEEDED // gql request succeeded with result\n  errorActionType: DATA_FETCH_FAILED      // gql http network request error (actual schema / server errors will succeed with error objects\n});\n\nconst component = createCustomElement('now-component', {\n  renderer: {type: snabbdom},\n  view(state) {\n    if(state.loading)\n      return <div>Loading...</div>;\n\n    if(!state.data)\n      return <div>No Data</div>;\n\n    return <div>My value: {state.data.data.now.mySchema.myField.value}</div>;\n  },\n  actionHandlers: {\n   [DATA_FETCH_REQUESTED]: dataFetchHandler,\n   [DATA_FETCH_STARTED]: ({updateState}) => updateState({loading: true}),\n   [DATA_FETCH_SUCCEEDED]: ({action, updateState}) => updateState({data: action.payload}),\n   [DATA_FETCH_FAILED]: () => { /* handle network error */ },\n  }\n});\n```\n\n**Parent Topic:**[Query record data using the GraphQL API framework](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/api-reference/web-services/scripted-graph-ql.md)\n\n"}}