Viewer in Relay.js

Question

Perché è necessario e come utilizzare viewer correttamente in Relay.js?

Ho trascorso la scorsa settimana per cercare di capire Relay.js. Ora sto bene con GraphQL e lo capisco abbastanza bene, ma sto avendo alcuni problemi con l'unione di GraphQL e Relay.js nella stessa applicazione.

Il primo passo sarebbe probabilmente comprendere viewer. Ho visto molti esempi e tutorial che lo utilizzano ma non viene mai spiegato e non è molto chiaro di cosa si tratta esattamente e per cosa è usato.

La documentazione del relè menziona viewer poche volte ma non c'è nemmeno una sola parola che la spieghi.

Vorrei poter aggiungere qualcosa a questa domanda ma ho paura che non ci siano spiegazioni online. È usato solo nei codici e lo strappa dal contesto non avrebbe alcun senso. Rispondere a questa domanda richiederà comunque qualche conoscenza su Realy.js/GraphQL.

La mia ipotesi migliore basata su innumerevoli esempi che ho esaminato è che è in qualche modo correlata all'utente? Se l'utente è anonimo o ha effettuato l'accesso? Per garantire un accesso diverso ai dati in base allo stato di accesso o al livello utente?

Answer 1

viewer non è un elemento specifico del relè. È solo un nome di campo. Sei rihgt. Questo campo rappresenta in genere un tipo GraphQLObject per l'utente o il visualizzatore dell'applicazione.

Il tipo di query radice è l'oggetto GraphQL che definiamo e passiamo come query nell'oggetto schema. Ad esempio, nello todo example application, è Root.

export const schema = new GraphQLSchema({ 
    query: Root, 
    mutation: Mutation, 
}); 

Nel relay-treasurehunt example application, il tipo di query radice è queryType.

export const schema = new GraphQLSchema({ 
    query: queryType, 
    mutation: mutationType, 
}); 

Il tipo di query radice è il punto di accesso principale attraverso il quale si accede agli altri dati. Questi altri dati sono elencati come campi dell'oggetto query radice. Come qualsiasi oggetto GraphQL, il tipo di query di root può avere uno o più campi. Nell'applicazione esempio todo, ha un campo denominato viewer:

const Root = new GraphQLObjectType({ 
    name: 'Root', 
    fields: { 
    viewer: { 
     type: GraphQLUser, 
     resolve:() => getViewer(), 
    }, 
    node: nodeField, 
    }, 
}); 

nell'applicazione esempio relè caccia al tesoro, il tipo di query radice è un campo denominato game.

const queryType = new GraphQLObjectType({ 
    name: 'Query', 
    fields:() => ({ 
    node: nodeField, 
    game: { 
     type: gameType, 
     resolve:() => getGame(), 
    }, 
    }), 
}); 

Ora, se c'è un campo viewer per rappresentare utente applicazione o il visualizzatore sito web, se l'utente è anonimo o loggato tutto dipende dall'applicazione. Se l'utente deve accedere, è possibile implementare una mutazione per il login. Puoi anche limitare l'accesso ai dati. Jonas Helfer ha pubblicato un excellent answer sul modo in cui il controllo dell'accesso utente può essere eseguito sul lato server.