Web APIで同形反応ルートを定義する

Question

同型Reactを使用してコンテンツ管理システムを構築しようとしています。私が決定しようとしているのは、RESTfulな要求応答オブジェクトを使ってルートを定義する方法です。

私はReact Starter Kitのroutesモジュールを見ていますが、その構文を使用していないので、私は経路オブジェクトのロジックを理解できません。子供たちが約束の配列であり、asyncがそれぞれを実行しているかのように見えます。しかし、const route = await next（）;は、ルートに関連するすべてのデータを生成します。ここでいくつかのルートマッチングロジックが起こっていますか？

ルートモジュールは、各ルートの親ディレクトリにあるindex.jsで定義はserver.jsここ

const route = await UniversalRouter.resolve(routes, { 
    path: req.path, 
    query: req.query, 
}); 

であると呼ばれます。

/* eslint-disable global-require */ 

// The top-level (parent) route 
export default { 

    path: '/', 

    // Keep in mind, routes are evaluated in order 
    children: [ 
    require('./home').default, 
    require('./contact').default, 
    require('./login').default, 
    require('./register').default, 
    require('./about').default, 
    require('./privacy').default, 
    require('./admin').default, 

    // Wildcard routes, e.g. { path: '*', ... } (must go last) 
    require('./notFound').default, 
    ], 

    async action({ next }) { 
    // Execute each child route until one of them return the result 
    const route = await next(); 

    // Provide default values for title, description etc. 
    route.title = `${route.title || 'Untitled Page'} - www.reactstarterkit.com`; 
    route.description = route.description || ''; 

    return route; 
    }, 

}; 

RESTfulリクエスト私のserver.jsに組み込むことを試みています。または、非同期アクションに入れてみました。

const routeList = await fetch('/graphql', { 
    method: 'post', 
    headers: { 
     Accept: 'application/json', 
     'Content-Type': 'application/json', 
    }, 
    body: JSON.stringify({ 
     query: '{routes{path,page,chunk,data{articles}}}', 
    }), 
    credentials: 'include', 
    }); 
    const routeData = await routeList.json(); 
    if (!routeData || !routeData.data || !routeData.data.routes) throw new Error('Failed to load the routes.'); 
    console.log(JSON.stringify(routeData, null, 2)); 

Answer 1

リアスタータキットUniversal Routerを実装しています。すべてのルートは、「パス」、「アクション」と（オプションで）「子どもの属性を持つだけでJSオブジェクトであるので、あなたは、あなたのようにそれらをしてください操作することができます。

あなたが話している「魔法」はただroute's action used as middlewareです。したがって、データは実際に最初に一致する子ルート（「home」、「contact」、「login」など）のいずれかから実際にフェッチされます。

は、私はあなたが欲しいフェッチ・ルーティングスタイルを実装するための最良の方法は100％確実ではないですが、あなたはルートを注入する前にそれを行うことができます。 SRC/client.jsで（線を中心に103）のようなもの：

注：これはテストされていないが、それは

const routeList = await fetch('/graphql', { 
    method: 'post', 
    headers: { 
    Accept: 'application/json', 
    'Content-Type': 'application/json', 
    }, 
    body: JSON.stringify({ 
    query: '{routes{path,page,chunk,data{articles}}}', 
    }), 
    credentials: 'include', 
}); 
const routeData = await routeList.json(); 
routeData.data.routes.forEach((route) => { 
    routes.children.push({ 
     path: route.path, 
     action() { 
     return <Page>Render your page here</Page>; 
     } 
    }) 
}) 

const route = await UniversalRouter.resolve(routes, { 
    ...context, 
    path: location.pathname, 
    query: queryString.parse(location.search), 
});