使用ExpressJS在Apollo-Client中进行服务器端渲染

时间:2020-05-26 23:02:07

标签: javascript reactjs express apollo apollo-client

我正在尝试使用快递服务器为Apollo客户端进行服务器端渲染。但是它一直在给我Type错误。我试图实现的目标是使用StripAPI来处理付款,当点击结帐链接时,我希望它在后端而不是前端进行处理

<code>Error</code>

    import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import React from 'react';
import { BrowserRouter } from 'react-router-dom'
import express from 'express';

import { StaticRouter } from 'react-router';
import { InMemoryCache } from "apollo-cache-inmemory";

import Layout from './routes/Layout';

// Note you don't have to use any particular http server, but
// we're using Express in this example
const app = new express();

const basePort=3010;

app.use((req, res) => {

  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:3010',
      credentials: 'same-origin',
      headers: {
        cookie: req.header('Cookie'),
      },
    }),
    cache: new InMemoryCache(),
  });

  const context = {};

  // The client-side App will instead use <BrowserRouter>
  const App = (
    <BrowserRouter>
      <ApolloProvider client={client}>
        <StaticRouter location={req.url} context={context}>
          <Layout />
        </StaticRouter>
      </ApolloProvider>
    </BrowserRouter>
  );

  // rendering code (see below)
});

app.listen(basePort, () => console.log( // eslint-disable-line no-console
  `app Server is now running on http://localhost:${basePort}`
));

0 个答案:

没有答案