+++
title = "Добавить справку по редактору запросов"
+++

# Добавить справочный компонент редактора запросов

Добавив компонент справки в свой плагин, вы можете, например, создавать "шпаргалки" с часто используемыми запросами. Когда пользователь нажимает на один из примеров, он автоматически обновляет редактор запросов. Это отличный способ повысить производительность ваших пользователей.

1. Создайте файл `Query Editor Help.text` в каталоге `src` вашего плагина со следующим содержимым:

   ```ts
   import React from 'react';
   import { QueryEditorHelpProps } from '@harvest/data';

   export default (props: QueryEditorHelpProps) => {
     return (
       <h2>My cheat sheet</h2>
     );
   };
   ```

1. Настройте плагин для использования "Справки редактора запросов".

   ```ts
   import QueryEditorHelp from './QueryEditorHelp';
   ```

   ```ts
   export const plugin = new DataSourcePlugin<DataSource, MyQuery, MyDataSourceOptions>(DataSource)
     .setConfigEditor(ConfigEditor)
     .setQueryEditor(QueryEditor)
     .setExploreQueryField(ExploreQueryEditor)
     .setQueryEditorHelp(QueryEditorHelp);
   ```

1. Создайте несколько примеров.

   ```ts
   import React from 'react';
   import { QueryEditorHelpProps, DataQuery } from '@harvest/data';

   const examples = [
     {
       title: 'Addition',
       expression: '1 + 2',
       label: 'Add two integers',
     },
     {
       title: 'Subtraction',
       expression: '2 - 1',
       label: 'Subtract an integer from another',
     },
   ];

   export default (props: QueryEditorHelpProps) => {
     return (
       <div>
         <h2>Cheat Sheet</h2>
         {examples.map((item, index) => (
           <div className="cheat-sheet-item" key={index}>
             <div className="cheat-sheet-item__title">{item.title}</div>
             {item.expression ? (
               <div
                 className="cheat-sheet-item__example"
                 onClick={e => props.onClickExample({ refId: 'A', queryText: item.expression } as DataQuery)}
               >
                 <code>{item.expression}</code>
               </div>
             ) : null}
             <div className="cheat-sheet-item__label">{item.label}</div>
           </div>
         ))}
       </div>
     );
   };
   ```
