使用导入的函数在React组件上调用compose

Question

I am trying to call several functions on a React component I have created, specifically the graphql() function from react-apollo

I use the pattern:

import someFunction from "../somewhere";

const withData = compose(
  graphql(gqlDocument, { name: "Name" }),
  graphql(anotherDocument, { name: "Name2" }),
  someFunction()
  ...
)
const ComponentWithData = withData(Component);
export default ComponentWithData

This works fine, unless I try to use a function that I have defined in another file and imported. despite literally being of the exact same form, ie graphql(document, { name: "Name" }) I get the error: Uncaught TypeError: Cannot read property 'apply' of undefined . If I simply copy and paste the function from the external module and put it inside the compose block, it works perfectly, so the issue has to be with how react is dealing apply inside this function composition.

When the function works, it ComponetWithData should have a prop called "Name" that represents the graphql document passed to the graphql() function. This is particularly perplexing because react-apollo's implementation of subscriptions has you passing a React component to a function that alters its props, and yet I can define subscription functions externally with no hassle. here is the pattern for reference:

const COMMENTS_SUBSCRIPTION = gql`
    subscription onCommentAdded($repoFullName: String!){
      commentAdded(repoFullName: $repoFullName){
        id
        content
      }
    }
`;
const withData = graphql(COMMENT_QUERY, {
    name: 'comments',
    options: ({ params }) => ({
        variables: {
            repoName: `${params.org}/${params.repoName}`
        },
    }),
    props: props => {
        return {
            subscribeToNewComments: params => {
                return props.comments.subscribeToMore({
                    document: COMMENTS_SUBSCRIPTION,
                    variables: {
                        repoName: params.repoFullName,
                    },
                    updateQuery: (prev, {subscriptionData}) => {
                        if (!subscriptionData.data) {
                            return prev;
                        }
                        const newFeedItem = subscriptionData.data.commentAdded;
                        return Object.assign({}, prev, {
                            entry: {
                                comments: [newFeedItem, ...prev.entry.comments]
                            }
                        });
                    }
                });
            }
        };
    },
});

Answer 1

While I didn't ever get it to work inside the compose block, I did find an acceptable solution:

const myFunc = compose(
  // graphql stuff here
);
const updated = myImportedFunc(Component);
const CompWGraphql = myFunc(updated);

There was just an issue with how graphql passes the object from one function to the other in the compose chain, and simply calling it outside the compose block and assigning the result to a new variable gave me the result I wanted.