Backend graphql api to Razzle?

[OmarEMC]

Hi! I have a backend server with the Auth logic and before I had created an App with create-react-app and from there I used it, what happens is that now when I implement my app, (with ApolloClient) and pass credentials: "include" (in the apolloclient at the server) the login system no longer works and I am wondering if I should and is there a way to implement the Auth backend server on the Razzle server.

[OmarEMC]

Spanish 🇪🇸 is my native language sorry if it is hard to understand me 😢

[fivethreeo]

You have to somehow pass the credentials (jwt or something similar?) down from express to the graphql client. This depends a lot on how your app is set up. So hard to answer without knowing more of the specifics.

[OmarEMC]

I use passport and passport-discord, and cors with the option credentials: true (express) and it have been working without the ssr but not now with ssr.

[fivethreeo]

https://www.apollographql.com/docs/react/performance/server-side-rendering/

[fivethreeo]

Post your server.js somewhere.

[OmarEMC]

Backend server:

require("dotenv").config();
require("./index-strategy");

const express = require("express");
const session = require("express-session");
const Store = require("connect-mongo")(session)
/* const rateLimit = require("express-rate-limit"); */
const passport = require("passport")
const cors = require("cors")
const mongoose = require("mongoose");
const { graphqlHTTP } = require("express-graphql");
const NoIntrospection = require("graphql-disable-introspection")

const app = express();
const RootSchema = require("./graphql/")
const config = require("./config");

const frontendCors = cors({
  origin: process.env.FRONTEND || config.FRONTEND,
  credentials: true
})

/* const apiRateLimit = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100,
  skip: function(req) {
    return ["127.0.0.1"].includes(req.ip)
  }
}) */

mongoose.connect(process.env.MONGODB_URI || config.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useFindAndModify: false
})

app.use("*", frontendCors)
app.use(session({
  secret: process.env.SECRET || config.SECRET,
  resave: false,
  saveUninitialized: false,
  cookie: {
    maxAge: 60000 * 60 * 24 * 2
  },
  store: new Store({ mongooseConnection: mongoose.connection })
}))
app.use(passport.initialize())
app.use(passport.session())



app.use("/", require("./routes")) // here are the auth routes (passport)
app.use('/graphql',
  graphqlHTTP({
    schema: RootSchema,
    graphiql: true,
    validationRules: config.INTROSPECTION ? [NoIntrospection] : []
  })
);

app.listen(4000, () => {
  console.log(`API REST corriendo en el puerto 4000 🚀`)
})

And my src/server.js for razzle:

import 'isomorphic-fetch';

import express from 'express';
import React from 'react';
import { StaticRouter } from 'react-router-dom';
import { renderToString } from 'react-dom/server';
import {
  ApolloProvider,
  ApolloClient,
  createHttpLink,
  InMemoryCache
} from '@apollo/client';
import { HelmetProvider } from 'react-helmet-async';
import { getDataFromTree } from "@apollo/client/react/ssr";
import App from './App';

const RazzleAssets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const server = express();
const link = createHttpLink({
  uri: "LINK",
  credentials: 'include',
})

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const client = new ApolloClient({
      ssrMode: true,
      link,
      credentials: 'include',
      cache: new InMemoryCache(),
    });

    const RouterContext = {};
    const HelmetContext = {};
    const Application = (
      <ApolloProvider client={client}>
        <HelmetProvider context={HelmetContext}>
          <StaticRouter context={RouterContext} location={req.url}>
            <App />
          </StaticRouter>
        </HelmetProvider>
      </ApolloProvider>
    );
    getDataFromTree(Application).then(() => {
      const content = renderToString(Application);
      const initialState = client.extract();
      const { helmet } = HelmetContext;
      
      if (RouterContext.url) {
        res.redirect(RouterContext.url);
      } else {
        const html = (<Html content={content} assets={RazzleAssets} helmet={helmet} state={initialState} />)
        res.status(200).send(`<!doctype html>\n${renderToString(html)}`)
      }
    })
  });

export default server;

const Html = ({ content, helmet, assets, state }) => {
  return (
    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        {helmet && helmet.title.toComponent()}
        {helmet && helmet.meta.toComponent()}
        {assets.client.css && <link rel="stylesheet" href={assets.client.css} />}
      </head>
      <body>
        <div
          id="root"
          dangerouslySetInnerHTML={{
            __html: content,
          }}
        />

        <script src={assets.client.js} defer crossOrigin="anonymous" />
        <script dangerouslySetInnerHTML={{
          __html: `window.__APOLLO_STATE__=${JSON.stringify(state).replace(/</g, '\\u003c')};`,
        }} />
      </body>
    </html>
  );
};

[fivethreeo]

You did not follow the instructions in the Apollo ssr docs. You need to somehow provide the credentials from the express request to the apolloclient.

[OmarEMC]

how will i provide the credentials from the express request to the apolloclient if the req in that request have not the credentials

[fivethreeo]

You need to use a way to authenticate so that happens somehow. I am working on a example with this. 😀But it will take some time (weeks) before it is done.