How to get Apollo gql codgen to work with frontend nextJS - reactjs

Question

I am using nextJS, I want my front end react queries with apollo to be typed out, but no configuration is working. I get an unknown error on my query when I use import {gql} from src/__generated__/gql and the following message when I hover over gql():
The query argument is unknown! Please regenerate the types
My question is do I need to do something different because I am using nextJS? I want to be able to use TypeScript with Apollo Client code gendocs so my gql queries will be typed
My entire pothos schema is in my pages/api/index.ts file (I do not yet know how to spread this code out into multiple files)
Example Query:
const CREATED_EVENT_QUERY = gql(`
query EventById($id: mongoId!) {
eventById(id: $id) {
_id
name
description
location{
coordinates
}
date
eventApplicants{
name
userId
weight
}
link
weights{
weight
spotsAvailable{
name
userId
}
}
}
}
`);
// Apollo Query
const { loading, error, data } = useQuery(CREATED_EVENT_QUERY, {
variables: {
id: params.id
}
});
I have tried the following configurations:
Apollos recommendation
Link Above
import { CodegenConfig } from '#graphql-codegen/cli';
const config: CodegenConfig = {
schema: 'http://localhost:3000/api',
documents: ['*.ts'],
generates: {
'./src/__generated__/': {
preset: 'client',
plugins: [],
presetConfig: {
gqlTagName: 'gql',
}
}
},
ignoreNoDocuments: true,
};
export default config;
the guilds nextJS recomendation
import type { CodegenConfig } from '#graphql-codegen/cli'
const config: CodegenConfig = {
// ...
generates: {
'path/to/file.ts': {
plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
config: {
reactApolloVersion: 3
}
}
}
}
export default config
combination of the two
import { CodegenConfig } from '#graphql-codegen/cli';
const config: CodegenConfig = {
schema: 'http://localhost:3000/api',
documents: ['*.ts'],
generates: {
'pages/api/index.ts': {
plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
config: {
reactApolloVersion: 3
}
}
},
ignoreNoDocuments: true,
};
export default config;