Next.js 14, Apollo and .graphql files

Help
1

OK, so I want to configure Apollo to use .graphql files for queries and fragments, I have done this in the past on Next 13 but in 14 the SWC seems to be causing me issues.

I have the client set up correctly, as without fragments data is fetched just fine.

I am using a fetch helper function:

import apolloClient from './apolloClient'
import { DocumentNode, OperationVariables } from '@apollo/client'

/**
 * Generic utility for fetching from GraphQl with Apollo
 *
 * @param query - The query document
 * @param variables - The variables for the query
 * @returns - The data from the query response
 */

export const fetchWithApollo = async <TData, TVariables extends OperationVariables>(
  query: DocumentNode,
  variables?: TVariables,
): Promise<TData> => {
  try {
    const { data } = await apolloClient.query<TData, TVariables>({
      query,
      variables: variables || ({} as TVariables),
    })

    if (!data) console.warn('💽 No data returned from query')
    return data
  } catch (error) {
    console.error('🚨 GraphQl query error:', error)
    throw error
  }
}

Which then allows me to import the query and the variables.

However, if I have a query without fragments this works just fine, but if I attempt to use a fragment the page that is rendered is a 404/fallback.

I have tried:

  • configuring webpack to use graphql-tag/loader but that didn’t work,
  • using babel (this results in the next compiler complaining about SWC,
  • forcing SWC with the experimental config options
  • both using, and not using, the #import syntax for the imports

I don’t want to use template string queries preferably as they’re not fun to work with generally compared to .graphql files.

Would really appreciate some help as it doesn’t seem like many folks are using it this way and are using the templates.

2

I think nowadays most people use GraphQL Codegen to turn their .graphql files into .ts files - you essentially get the best of both worlds without being bound by framework restrictions.