React Apollo - Как передать параметр маршрута в компонент запроса в качестве переменной при SSR (рендеринг на стороне сервера)
У меня есть список предметов. После нажатия на элемент он связывается со страницей "item" с параметром URL для "ID" в конце маршрута.
Я пытаюсь выяснить, как передать параметр в компонент запроса Apollo, когда он отображается на сервере. Конечно, я пытаюсь передать его как переменную опору.
Компонент элемента
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import {Query} from 'react-apollo';
import {GET_RECIPE} from './../queries';
const Item = ({match}) => {
const _id = match.params._id;
return(
<div>
<h1>
Test Page Header
</h1>
<Query query={GET_RECIPE} variables={{_id}} ssr={false} >
{({ data, loading, error }) => {
if(loading) return <div>Loading</div>
if(error) return <div>Error</div>
return(
<div>
{data.getRecipe.name}
</div>
)
}}
</Query>
</div>
);
}
export default Item;
запрос
export const GET_RECIPE = gql`
query($_id: ID!){
getRecipe(_id: $_id){
_id
name
}
}
`;
Резольвер
getRecipe: async (root, {_id}, {Recipe}) => {
const recipe = await Recipe.findOne({_id});
return recipe;
}
Узел
app.get(['/*/:param', '*'], (req, res) => {
const ParamValue = req.params.param ? req.params.param : null;
console.log(ParamValue);
const client = new ApolloClient({
ssrMode: true,
// Remember that this is the interface the SSR server will use to connect to the
// API server, so we need to ensure it isn't firewalled, etc
link: createHttpLink({
uri: 'http://localhost:3000/graphql',
credentials: 'same-origin',
headers: {
cookie: req.header('Cookie'),
},
}),
cache: new InMemoryCache(),
});
const context = {};
// The client-side App will instead use <BrowserRouter>
const App = (
<ApolloProvider client={client}>
<StaticRouter location={req.url} context={context}>
<AppComponent />
</StaticRouter>
</ApolloProvider>
);
getDataFromTree(App).then(() => {
const content = ReactDOM.renderToString(App);
const initialState = client.extract();
const html = <Html content={content} state={initialState} />;
res.status(200);
res.send(`<!doctype html>\n${ReactDOM.renderToStaticMarkup(html)}`);
res.end();
});
});