How to use the olymp.graphql function in olymp

import React, { Component } from 'react';
import { Link, graphql, gql, withItem, withAuth, Helmet } from 'olymp';
import { Spin } from 'antd';
import { Image, SlateMate } from 'olymp-cms';
import { Gateway } from 'react-gateway';
import moment from 'moment';

const fieldNames = 'id, art, date, name, extrakt, slug, text, bild { height, width, url, crop }';
@withAuth
@graphql(gql`
  query termin($slug: String) {
    termin(query: { slug: { eq: $slug } }) {
      ${fieldNames}
    }
  }
`, {
  options: ({ location }) => ({ variables: { slug: location.pathname.split('/news')[1] } }),
})
@withItem({ typeName: 'termin', fieldNames })
export default class News extends Component {
  render() {
    const { item, auth, location, save, patch } = this.props;
    const readOnly = !auth.user || auth.user.einrichtung;
    if (!item) return ;
    // style="border-bottom-right-radius:130px;200px;"
    return (

import { auth, withRouter } from '../decorators';
import { useLightboxes } from '../edits/image/with-lightbox';
import PageModal from './pages/modals/page';
import MediaDetail from './media/detail';
import UploadModal from './media/upload';
import CollectionDetail from './collections/detail';
import './container.less';

const SubMenu = Menu.SubMenu;
// const MenuItemGroup = Menu.ItemGroup;

@auth
@useLightboxes
@withRouter
@graphql(gql`
  query schema {
    schema: __schema {
      types {
        name
        description
        interfaces {
          name
        }
        fields {
          name
          type {
            kind
            name
          }
        }
      }

import { withRouter } from '../decorators';
import { useBlockTypes } from 'olymp/slate';
import { useLightboxes } from '../edits/image/with-lightbox';
import PageModal from './pages/modals/page';
import MediaDetail from './media/detail';
import UploadModal from './media/upload';
import CollectionDetail from './collections/detail';
import './container.less';

const SubMenu = Menu.SubMenu;

@useLightboxes
@withRouter
@useBlockTypes()
@graphql(gql`
  query schema {
    schema: __schema {
      types {
        name
        description
        interfaces {
          name
        }
        fields {
          name
          type {
            kind
            name
          }
        }
      }

import sortBy from 'lodash/sortBy';

import { useBlockTypes } from 'olymp/slate';
import { useLightboxes } from '../edits/image/with-lightbox';
import PageModal from './pages/modals/page';
import MediaDetail from './media/detail';
import UploadModal from './media/upload';
import CollectionDetail from './collections/detail';
import './container.less';

const SubMenu = Menu.SubMenu;

@useLightboxes
@withRouter
@useBlockTypes()
@graphql(gql`
  query schema {
    schema: __schema {
      types {
        name
        description
        interfaces {
          name
        }
        fields {
          name
          type {
            kind
            name
          }
        }
      }

marginRight: theme.space3,
    marginBottom: theme.space2,
  }),
  p =&gt; <img>,
  p =&gt; Object.keys(p)
);

const Ul = createComponent(
  ({ theme }) =&gt; ({
    width: '100%',
  }),
  'ul',
  p =&gt; Object.keys(p)
);

@graphql(
  gql`
    query artikelList {
      items: artikelList(
        sort: { date: DESC }
        query: { state: { ne: REMOVED } }
      ) {
        id
        date
        name
        slug
        bild {
          id
          url
          caption
          width
          height