2017-07-03 69 views
0

我想打電話給我創建了一個陣營組件上的幾個功能,特別是從react-apollo調用撰寫的反應的組分進口功能

graphql()功能我用的模式:

import someFunction from "../somewhere"; 

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

該作品很好,除非我嘗試使用我在另一個文件中定義並導入的函數。儘管字面上是完全相同的形式,即graphql(document, { name: "Name" })我得到的錯誤:Uncaught TypeError: Cannot read property 'apply' of undefined。如果我簡單地從外部模塊複製並粘貼該功能並將其放入組合模塊中,則它可以很好地工作,所以問題的關鍵在於如何在此功能組合中處理apply

當函數有效時,ComponetWithData應該有一個名爲「Name」的道具,它代表傳遞給graphql()函數的graphql文檔。這尤其令人困惑,因爲react-apollo的訂閱實現需要將React組件傳遞給改變其道具的函數,但是我可以毫不費力地定義外部訂閱函數。這裏是供參考的模式:

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] 
          } 
         }); 
        } 
       }); 
      } 
     }; 
    }, 
}); 

回答

0

雖然我沒有以往任何時候都得到它的撰寫塊內工作,我沒有找到一個可接受的解決方案:

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

有隻是如何的問題graphql將對象從一個函數傳遞到組合鏈中的另一個函數,並將它簡單地在compose塊外部調用,並將結果賦值給一個新變量給了我想要的結果。