2017-07-03 2 views
0

Ich versuche ich, die aus graphql() Funktion speziell erstellt wurden mehrere Funktionen auf einer React-Komponente aufzurufen verwende ich das Muster:komponieren Aufruf auf React Komponenten mit importierten Funktionen

import someFunction from "../somewhere"; 

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

Dies funktioniert Gut, es sei denn, ich versuche eine Funktion zu verwenden, die ich in einer anderen Datei definiert und importiert habe. obwohl ich buchstäblich die exakt gleiche Form habe, d. h. graphql(document, { name: "Name" }) bekomme ich den Fehler: Uncaught TypeError: Cannot read property 'apply' of undefined. Wenn ich einfach die Funktion aus dem externen Modul kopiere und einfüge und sie in den Compose-Block lege, funktioniert es perfekt, also muss das Problem damit sein, wie sich reaction apply innerhalb dieser Funktionszusammensetzung verhält.

Wenn die Funktion funktioniert, sollte ComponetWithData eine Stütze namens "Name" haben, die das graphql Dokument darstellt, das an die graphql() Funktion übergeben wird. Dies ist besonders verwirrend, da die Implementierung von Subskriptionen von react-apollo eine React-Komponente an eine Funktion weiterleitet, die ihre Requisiten verändert, und doch kann ich Subskriptionsfunktionen extern ohne Probleme definieren. hier ist das Muster als Referenz:

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

Antwort

0

Während ich noch nie bekam es im Innern des compose Block zu arbeiten, ich habe eine akzeptable Lösung finden:

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

Es gab nur ein Problem mit, wie graphql übergibt das Objekt von einer Funktion zur anderen in der Verfassungskette und ruft es einfach außerhalb des Compose-Blocks auf, und das Ergebnis einer neuen Variablen zuzuweisen gab mir das gewünschte Ergebnis.

Verwandte Themen