How to use the @apollo/react-hoc.graphql function in @apollo/react-hoc

import { graphql } from "@apollo/react-hoc";
import { GET_LATEST_PUBLISHED_POSTS } from "../queries/Queries";

export default graphql(GET_LATEST_PUBLISHED_POSTS, {
  options: props => ({
    variables: {
      type: "post",
      limit: props.limit || 3,
    },
  }),
  props: ({ data: { loading, posts } }) => ({
    posts,
    ploading: loading,
  }),
});

color: 'blueGreyDarkTransparent',
  lineHeight: 'tight',
  size: 'smedium',
})(Text);

const enhance = compose(
    withAccountSettings,
    withAccountData,
    graphql(COMPOUND_USDC_ACCOUNT_TOKEN_QUERY, {
        //options: (props) => ({ variables: { addr: `0x39aa39c021dfbae8fac545936693ac917d5e7563-${props.accountAddress.toLocaleLowerCase('en')}` }}),
        props: ({ data }) => {
          console.log('usdc ', data);
          return data;
        }
    }),
    graphql(COMPOUND_DAI_ACCOUNT_TOKEN_QUERY, {
      //options: (props) => ({ variables: { addr: `0xf5dce57282a584d2746faf1593d3121fcac444dc-${props.accountAddress.toLocaleLowerCase('en')}` }}),
      props: ({ data }) => {
        console.log('dai ', data);
        return data;
      }
    }),
    withHandlers({
        onPressContainer: ({ item, onPress }) => () => {
          if (onPress) {
              onPress(item);
          }
        },
    })
);

const CompoundInvestmentCard = enhance(

import { graphql } from "@apollo/react-hoc";
import { THEME_SETTINGS } from "../../shared/queries/Queries";

export default graphql(THEME_SETTINGS, {
  options: props => {
    let name = props.name;
    if (props.settings) {
      name = props.settings.data.theme.value;
    }
    return {
      variables: {
        name,
      },
    };
  },
  props: ({ data: { loading, themeSettings } }) => {
    let newSettings = {};
    if (themeSettings && themeSettings.length > 0) {
      const userValues = JSON.parse(themeSettings[0].value);
      const settings = JSON.parse(themeSettings[0].settings);

import { graphql } from "@apollo/react-hoc";
import { GET_POST_BY_SLUG } from "../../shared/queries/Queries";

export default graphql(GET_POST_BY_SLUG, {
  options: props => {
    return {
      variables: {
        type: "post",
        slug: props.slug || props.match.params.slug,
      },
    };
  },
  props: ({ data: { loading, post } }) => ({
    post,
    loading,
  }),
});

import { graphql } from "@apollo/react-hoc";
import { SEARCH_POSTS_BY_TAXONOMY } from "../queries/Queries";
import config from "../../config";

export default graphql(SEARCH_POSTS_BY_TAXONOMY, {
  options: props => {
    let offset =
      props.router.match.params.page_no == 1
        ? 0
        : props.router.match.params.page_no;
    let type = "";
    if (props.type === "category") {
      type = "post_category";
    } else if (props.type === "tag") {
      type = "post_tag";
    }
    return {
      variables: {
        type,
        slug: props.query || props.router.match.params.query,
        postType: "post",

/>
          
            {t("common.save")}
          
        
      
    );
  }
}

const CategoriesData = graphql(GET_TAXONOMIES, {
  name: "categories",
  options: () => ({ variables: { type: "post_category" } }),
});

const PagesData = graphql(GET_POSTS, {
  name: "pages",
  options: () => ({
    variables: { filters: { type: "page", status: "publish" } },
  }),
});

export default translate("translations")(
  UpdateOptions(CategoriesData(PagesData(NavigationBuilder))),
);

},
        ]}
      />
    
  );
};

Filters.propTypes = {
  query: PropTypes.object.isRequired,
  tags: PropTypes.object,
  categories: PropTypes.object,
  t: PropTypes.func,
  changeFilter: PropTypes.func.isRequired,
};

const CategoriesData = graphql(GET_TAXONOMIES, {
  name: "categories",
  options: () => ({ variables: { type: "post_category" } }),
});

const TagsData = graphql(GET_TAXONOMIES, {
  name: "tags",
  options: () => ({ variables: { type: "post_tag" } }),
});

export default translate("translations")(TagsData(CategoriesData(Filters)));

{t("common.save")}
          
        
      
    );
  }
}

const CategoriesData = graphql(GET_TAXONOMIES, {
  name: "categories",
  options: () => ({ variables: { type: "post_category" } }),
});

const PagesData = graphql(GET_POSTS, {
  name: "pages",
  options: () => ({
    variables: { filters: { type: "page", status: "publish" } },
  }),
});

export default translate("translations")(
  UpdateOptions(CategoriesData(PagesData(NavigationBuilder))),
);

import { graphql } from "@apollo/react-hoc";
import { MENU_CONTENT } from "../queries/Queries";
import config from "../../config";

export default graphql(MENU_CONTENT, {
  options: props => {
    let offset =
      props.match.params.page_no == 1 ? 0 : props.match.params.page_no;
    return {
      variables: {
        type: "post_category",
        slug: props.slug || props.match.params.slug,
        postType: "post",
        limit: props.limit || config.itemsPerPage,
        offset: parseInt(props.offset || offset || 0),
      },
    };
  },
  props: ({ data: { loading, menuContent, fetchMore } }) => {
    return {
      posts: (menuContent && menuContent.posts) || [],

import { graphql } from "@apollo/react-hoc";
import { GET_POST_BY_SLUG } from "../../shared/queries/Queries";

export default graphql(GET_POST_BY_SLUG, {
  options: props => {
    return {
      variables: {
        type: "post",
        slug: props.slug || props.match.params.slug,
      },
    };
  },
  props: ({ data: { loading, post } }) => ({
    post,
    loading,
  }),
});