React apollo默認查詢變量從REDEX存儲

Question

我想使用react-apollo製作多語言單頁應用程序。當前的語言環境存儲在redux存儲中。問題是我必須連接每個組件才能將locale變量傳遞給查詢。這種重複的代碼看起來多餘。我無法將語言環境硬編碼到查詢中，因爲它對於不同的用戶可能會有所不同。我需要動態傳遞默認值。有任何想法嗎？

Answer 1

您可以將語言環境作爲標題添加到使用apollo客戶端中間件發送到服務器的每個請求中。如果您使用的是瀏覽器，請將區域設置存儲在localStorage中;如果您使用的是本機格式，則將區域設置存儲在asyncStorage中。

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;