Cannot find ctx to use inside headers like I did in older versions

[Sparklytical]

This might be dumb question but in past versions I did something like this where I directly passed ctx object to initApollo - https://github.com/benawad/lireddit/blob/master/web/src/utils/createWithApollo.js

and then do something like this while calling the client -

const createClient = (ctx: NextPageContext) =>
  new ApolloClient({
    uri: "http://localhost:4000/graphql", 
    credentials: "include",
    headers: {
      cookie:
        (typeof window === "undefined"
          ? ctx?.req?.headers.cookie
          : undefined) || "",
    },
    cache: new InMemoryCache({}),
  });

Seeing that in latest version, its already converted into ts and supports context, the previous version isnt working now. Can you sort of give some example on how to do it correctly? No hurries.

I do something like this now -

const apolloClient = new ApolloClient({
  uri: "http://localhost:4000/graphql",
  credentials: "include",
  headers: {
    cookie:
      (typeof window === "undefined"
        ? ctx?.req?.headers.cookie
        : undefined) || "",
  },
  cache: new InMemoryCache({}),
});```

my typescript isnt that strong for please ignore silly stuff

[alaeddine119]

I've gone through that @benawad 's tutorial as well, it's a very good one :)

And here is what I came up with : while withApollo takes a ApolloClient<NormalizedCacheObject> | ((ctx?: NextPageContext) => ApolloClient<NormalizedCacheObject>); your createClient is of type (ctx: NextPageContext) => ApolloClient<NormalizedCacheObject>. So, all you gonna do is fix it this way :

import { withApollo as createWithApollo } from "next-apollo";
import { ApolloClient, InMemoryCache } from "@apollo/client";
import { NextPageContext } from "next";

const createClient = (ctx?: NextPageContext) =>
  new ApolloClient({
    uri: process.env.NEXT_PUBLIC_API_URL as string,
    credentials: "include",
    headers: {
      cookie:
        (typeof window === "undefined"
          ? ctx?.req?.headers.cookie
          : undefined) || "",
    },
    cache: new InMemoryCache({}),
  });

export const withApollo = createWithApollo(createClient); 

In other words make make ctx: NextPageContext | undefined. Hope this works !

[Sparklytical]

@alaeddine119 thanks man. This ctx?thing was missing from my code. I was able to reach until same stage as you but only the question mark was missing. :+1:

[Rec0iL99]

Is it possible to make the withApollo function accept a component with a type other than NextPage?

I want it to accept my custom wrap-around type over NextPage.

// my wrap-around type over NextPage
import { NextPage } from 'next';

export type INextPage<T> = NextPage<T, T> & { ws: boolean };