Lösung für dynamisch die Abfrage in reagieren-apollo

Question

react-apollo chaning hat ein Beispiel in ihrer docs wo sie Query-Variablen berechnen, basierend auf einem Komponenten Requisiten:

// The caller could do something like: 
<ProfileWithData avatarSize={300} /> 

// And our HOC could look like: 
const ProfileWithData = graphql(CurrentUserForLayout, { 
    options: ({ avatarSize }) => ({ variables: { avatarSize } }), 
})(Profile); 

Ich habe einen Anwendungsfall, wo Ich mag würde sich ändern die Abfrage basierend auf Komponenten Requisiten, aber bin etwas hart gedrückt herauszufinden, wie dies zu tun ist.

Um genauer zu sein, ich versuche, das CurrentUserForLayout Objekt zu ändern, das ich aus einer anderen Datei importiere.

Answer 1

Dies klingt wie ein guter Fall für eine Komponente höherer Ordnung, die den Aufruf graphql umschließt und eine andere Funktion zurückgibt, die Ihre untergeordnete Komponente akzeptiert. Diese HOC kann dann basierend auf den übergebenen Eigenschaften dynamisch eine Abfrage erstellen.

Zum Beispiel

export const graphqlWrapper = (...rest) => { 
    const query = /* Create your query here. */; 

    return graphql(query, ...rest); 
} 

Dann nutzen:

const ProfileWithData = graphqlWrapper({ 
    options: ({ avatarSize }) => ({ variables: { avatarSize } }), 
})(Profile); 

Oder Sie folgen einem ähnlichen Muster.

Ein wenig mehr Details zu Ihrem Anwendungsfall wären jedoch nützlich.