React apollo Standard-Abfragevariable von redux speichern

Question

Ich versuche, eine mehrsprachige Anwendung mit einer einzigen Seite mithilfe von react-apollo zu machen. Das aktuelle Gebietsschema wird im Redux-Speicher gespeichert. Das Problem ist, dass ich jede Komponente mit redux verbinden muss, nur um Gebietsschema-Variable an die Abfrage zu übergeben. Eine solche Wiederholung des Codes erscheint überflüssig. Ich kann das Gebietsschema nicht fest codieren, da es für verschiedene Benutzer unterschiedlich sein kann. Ich muss den Standardwert dynamisch übergeben. Irgendwelche Ideen?

Answer 1

Sie können das Gebietsschema als Kopfzeile zu jeder Anforderung hinzufügen, die Sie mit der Middleware des Apollo-Clients an Ihren Server senden. Speichern Sie das Gebietsschema in localStorage, wenn Sie einen Browser verwenden, oder asyncStorage, wenn Sie reactive native verwenden.

import ApolloClient, { createNetworkInterface } from 'apollo-client'; 
import { GRAPHQL_API_DEV } from './api'; 
import { checkForLocale } from '../../utils/locale'; 

const networkInterface = createNetworkInterface({ 
    uri: GRAPHQL_API_DEV 
}); 

networkInterface.use([{ 
    applyMiddleware(req, next) { 
    // Create the header object if needed. 
    if (!req.options.headers) { 
     req.options.headers = {}; 
    } 

    // get the locale token from Async storage 
    // and assign it to the request object 
    checkForLocale() 
    .then(LOCALE => { 
     req.options.headers.custom-header = LOCALE; 
     next(); 
    }) 
    .catch(error => { 
     req.options.headers.custom-header = null; 
     next(); 
    }) 
    } 
}]); 

const client = new ApolloClient({ 
    networkInterface, 
    dataIdFromObject: o => o.id 
}); 

export default client;