SSR – Send request with cookie from apollo client with Next.js

Explanation of the problem

The application is facing an issue where the first request made using Apollo Client does not include the required authentication cookie or Bearer token, leading to the rejection of the request by the API. Despite trying various examples and tutorials from the internet, the problem persists. It appears that the first request is initiated from the server, which lacks access to the cookie, while the second request, triggered automatically after the first one, includes the necessary authentication details and succeeds. Attempts to render the component exclusively on the client-side have not resolved the issue.

To provide insights into the code involved, the init-apollo.tsx file handles the configuration of Apollo Client. It utilizes an HTTP link and an authentication link to establish the necessary connections. The authentication link is responsible for setting the authorization header with the Bearer token retrieved from the auth module. Here’s an excerpt of the code:

// init-apollo.tsx
import { ApolloClient, InMemoryCache } from "apollo-boost";
import fetch from "isomorphic-unfetch";
import { setContext } from "apollo-link-context";
import { createHttpLink } from "apollo-link-http";
import { variables } from "./variables";
import { auth } from "./auth";
import { isBrowser } from "./utils";

let apolloClient = null;

function create(initialState, { fetchOptions }) {
  const httpLink = createHttpLink({
    uri: variables.apiUri,
    credentials: "include",
    fetch: isBrowser ? fetch : undefined,
    fetchOptions
  });

  const authLink = setContext((_, { headers }) => {
    const token = auth.getUserToken();
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : ""
      }
    };
  });

  return new ApolloClient({
    connectToDevTools: isBrowser,
    ssrMode: false,
    link: authLink.concat(httpLink),
    cache: new InMemoryCache().restore(initialState || {}),
    ssrForceFetchDelay: 100
  });
}

These code snippets demonstrate the configuration of the Apollo Client and the inclusion of the necessary authorization header with the Bearer token.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for: SSR – Send request with cookie from apollo client with Next.js

To address the issue where the first request made using Apollo Client is missing the authentication cookie or Bearer token, you can modify the code in withApollo.tsx. The getInitialProps method retrieves the token from the cookies and passes it to the initApollo function. However, the getInitialProps method is executed on the server-side during the initial page load, which may not have access to the cookies. You can modify the code to retrieve the token from the browser’s cookies when running on the client-side. Here’s an updated version of the code:

import React from "react";
import cookie from "cookie";
import initApollo from "./init-apollo";
import Head from "next/head";
import { getDataFromTree } from "react-apollo";

function parseCookies(req, options = {}) {
  return cookie.parse(
    req ? req.headers.cookie || "" : document.cookie,
    options
  );
}

export default App => {
  return class WithApollo extends React.Component {
    apolloClient = undefined;
    static displayName = "withApollo(App)";

    constructor(props) {
      super(props);
      this.apolloClient = initApollo(props.apolloState, {
        getToken: () => {
          return parseCookies(undefined).token;
        },
      });
    }

    static async getInitialProps(ctx) {
      const {
        Component,
        router,
        ctx: { req, res },
      } = ctx;

      const apollo = initApollo(
        {},
        {
          getToken: () => {
            if (typeof window === "undefined") {
              return parseCookies(req).token;
            } else {
              return parseCookies(undefined).token;
            }
          },
        }
      );

      ctx.ctx.apolloClient = apollo;

      let appProps = {};
      if (App.getInitialProps) {
        appProps = await App.getInitialProps(ctx);
      }

      if (res && res.finished) {
        // When redirecting, the response is finished.
        // No point in continuing to render
        return {};
      }

      if (typeof window === "undefined") {
        try {
          // Run all GraphQL queries
          await getDataFromTree(
            <App
              {...appProps}
              Component={Component}
              router={router}
              apolloClient={apollo}
            />
          );
        } catch (error) {
          // Prevent Apollo Client GraphQL errors from crashing SSR.
          // Handle them in components via the data.error prop:
          // https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-query-data-error
          console.error("Error while running `getDataFromTree`", error);
        }

        // getDataFromTree does not call componentWillUnmount
        // head side effect therefore needs to be cleared manually
        Head.rewind();
      }

      // Extract query data from the Apollo store
      const apolloState = apollo.cache.extract();

      return {
        ...appProps,
        apolloState,
      };
    }

    render() {
      return <App {...this.props} apolloClient={this.apolloClient} />;
    }
  };
};

By checking whether the code is running on the server or the client-side, the updated code retrieves the token accordingly, ensuring it is available for the initial request.

Remember to update the withApollo HOC usage in _app.tsx to use the modified version:

import withApollo from "../helpers/with-apollo";

class MyApp extends App {
  // ...

  // Remove the existing withApollo export and wrap the component with the modified version
}

export default withApollo(MyApp);

With these modifications, the Apollo Client should include the authentication cookie or Bearer

const express = require('express');
const cors = require('cors');

const app = express();

// Enable CORS for all routes
app.use(cors());

// Add your Apollo Server middleware and other routes

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

import { useMutation } from '@apollo/client';

const DELETE_POST_MUTATION = gql`
  mutation DeletePost($postId: ID!) {
    deletePost(postId: $postId) {
      id
    }
  }
`;

const PostDeleteButton = ({ postId }) => {
  const [deletePost] = useMutation(DELETE_POST_MUTATION, {
    variables: { postId },
    refetchQueries: ['GetPosts'], // Refetch the 'GetPosts' query after deleting a post
  });

  return <button onClick={deletePost}>Delete</button>;
};

import { useSubscription } from '@apollo/client';

const MESSAGE_SUBSCRIPTION = gql`
  subscription OnMessageAdded {
    messageAdded {
      id
      content
      createdAt
    }
  }
`;

const MessageList = () => {
  const { data, loading, error } = useSubscription(MESSAGE_SUBSCRIPTION);

  if (loading) {
    return <p>Loading messages...</p>;
  }

  if (error) {
    return <p>Error loading messages: {error.message}</p>;
  }

  const { messageAdded } = data;

  return (
    <ul>
      {messageAdded.map((message) => (
        <li key={message.id}>{message.content}</li>
      ))}
    </ul>
  );
};

import { ApolloClient, gql } from '@apollo/client';

const client = new ApolloClient({
  // configuration options
});

const GET_USERS = gql`
  query getUsers {
    users {
      id
      name
      email
    }
  }
`;

client.query({ query: GET_USERS })
  .then(response => {
    console.log(response.data.users);
  })
  .catch(error => {
    console.error(error);
  });

import { ApolloClient, gql, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  cache: new InMemoryCache(),
  // other configuration options
});

const GET_USER = gql`
  query getUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

// Assuming the user with ID '123' has been previously fetched and cached
const cachedUser = client.readQuery({
  query: GET_USER,
  variables: { id: '123' },
});

console.log(cachedUser);

import { ApolloClient, gql } from '@apollo/client';

const client = new ApolloClient({
  // configuration options
});

const SUBSCRIBE_TO_MESSAGES = gql`
  subscription subscribeToMessages {
    messages {
      id
      text
      timestamp
    }
  }
`;

const subscription = client.subscribe({ query: SUBSCRIBE_TO_MESSAGES });

subscription.subscribe({
  next: response => {
    console.log(response.data.messages);
  },
  error: error => {
    console.error(error);
  },
});