react 入门工具包中使用的 fetchKnowingCookie 中间件是什么?
What is fetchKnowingCookie middleware used for in the react starter kit?
查看 React 入门工具包中的 createHelpers.js 代码,我看到它在中间件中创建了一个 grapqlRequest 和一个 fetchKnowingCookie 方法。
https://github.com/kriasoft/react-starter-kit/blob/feature/redux/src/store/createHelpers.js
这到底是在做什么?是否向服务器呈现的提取请求添加 cookie header?
我看到它还通过 thunk.withExtraArgument
将函数传递给中间件,那条额外的行有什么作用?这是否意味着可以从 redux 异步操作中获取带 cookies 的功能?
import fetch from '../core/fetch';
function createGraphqlRequest(fetchKnowingCookie) {
return async function graphqlRequest(query, variables) {
const fetchConfig = {
method: 'post',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({ query, variables }),
credentials: 'include',
};
const resp = await fetchKnowingCookie('/graphql', fetchConfig);
if (resp.status !== 200) throw new Error(resp.statusText);
return await resp.json();
};
}
function createFetchKnowingCookie({ cookie }) {
if (!process.env.BROWSER) {
return (url, options = {}) => {
const isLocalUrl = /^\/($|[^/])/.test(url);
// pass cookie only for itself.
// We can't know cookies for other sites BTW
if (isLocalUrl && options.credentials === 'include') {
const headers = {
...options.headers,
cookie,
};
return fetch(url, { ...options, headers });
}
return fetch(url, options);
};
}
return fetch;
}
export default function createHelpers(config) {
const fetchKnowingCookie = createFetchKnowingCookie(config);
const graphqlRequest = createGraphqlRequest(fetchKnowingCookie);
return {
fetch: fetchKnowingCookie,
graphqlRequest,
history: config.history,
};
}
正在将 fetch
的修改版本注入应用到商店的 thunk 中间件。
react-starter-kit
正在使用 node-fetch
处理服务器上的 fetch
调用。不幸的是,node-fetch
doesn't support cookies.
每次用户向服务器发出请求时,都会使用 req.headers.cookie
配置一个新商店。然后,该 cookie 对象将用于应用程序中 thunk 发出的任何 fetch
请求,绕过 node-fetch
限制。
查看 React 入门工具包中的 createHelpers.js 代码,我看到它在中间件中创建了一个 grapqlRequest 和一个 fetchKnowingCookie 方法。
https://github.com/kriasoft/react-starter-kit/blob/feature/redux/src/store/createHelpers.js
这到底是在做什么?是否向服务器呈现的提取请求添加 cookie header?
我看到它还通过 thunk.withExtraArgument
将函数传递给中间件,那条额外的行有什么作用?这是否意味着可以从 redux 异步操作中获取带 cookies 的功能?
import fetch from '../core/fetch';
function createGraphqlRequest(fetchKnowingCookie) {
return async function graphqlRequest(query, variables) {
const fetchConfig = {
method: 'post',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({ query, variables }),
credentials: 'include',
};
const resp = await fetchKnowingCookie('/graphql', fetchConfig);
if (resp.status !== 200) throw new Error(resp.statusText);
return await resp.json();
};
}
function createFetchKnowingCookie({ cookie }) {
if (!process.env.BROWSER) {
return (url, options = {}) => {
const isLocalUrl = /^\/($|[^/])/.test(url);
// pass cookie only for itself.
// We can't know cookies for other sites BTW
if (isLocalUrl && options.credentials === 'include') {
const headers = {
...options.headers,
cookie,
};
return fetch(url, { ...options, headers });
}
return fetch(url, options);
};
}
return fetch;
}
export default function createHelpers(config) {
const fetchKnowingCookie = createFetchKnowingCookie(config);
const graphqlRequest = createGraphqlRequest(fetchKnowingCookie);
return {
fetch: fetchKnowingCookie,
graphqlRequest,
history: config.history,
};
}
正在将 fetch
的修改版本注入应用到商店的 thunk 中间件。
react-starter-kit
正在使用 node-fetch
处理服务器上的 fetch
调用。不幸的是,node-fetch
doesn't support cookies.
每次用户向服务器发出请求时,都会使用 req.headers.cookie
配置一个新商店。然后,该 cookie 对象将用于应用程序中 thunk 发出的任何 fetch
请求,绕过 node-fetch
限制。