graphql-code-generator-community icon indicating copy to clipboard operation
graphql-code-generator-community copied to clipboard

Can't get graphql-tag-operations to work with server-side apollo query.

Open ZakKa89 opened this issue 3 years ago • 2 comments

Describe the bug

I have a nextjs project wich requires me to do a server-side query. I have the following working code with gql from @apollo/client. It only works like this, but not if I use the gql wrapper from the generated types.

// import { gql } from '@/types/gql'
import { gql } from '@apollo/client'
import { useQuery } from '@apollo/client'

export const SEARCH = gql`
  query Search($searchTerm: String!) {
    search(search: $searchTerm) {
      totalResults
      results
    }
  }

the server side part (on a nextjs endpoint)

const apolloClient = initializeApollo()
  try {
    const { data } = await apolloClient.query({
      query: SEARCH,
      variables: {
        searchTerm: 'rfid'
      }
    })

(see steps to reproduce for the actual bug)

Your Example Website or App

Not ready yet.... It's quite a specific setup

Steps to Reproduce the Bug or Issue

If I want to reproduce the error, I implement the query like this (with gql imported from the generated files instead of apollo-client). It will work fine with useQuery from apollo (clientside), but not with a query executed directly from the apolloClient

import { gql } from '@/types/gql'
// import { gql } from '@apollo/client'
import { useQuery } from '@apollo/client'

export const SEARCH = gql(`
  query Search($searchTerm: String!) {
    search(search: $searchTerm) {
      totalResults
      results
    }
  }
`)

The error:

Invariant Violation: You must wrap the query string in a "gql" tag.

Expected behavior

I expect to be able to use the gql wrapper for writing queries, and still be able to do implement server-side queries with apollo/graphql

Screenshots or Videos

No response

Platform

    "next": "^12.2.2",
      "@apollo/client": "^3.6.9",
    "@graphql-codegen/cli": "^2.13.3",
    "@graphql-codegen/client-preset": "^1.0.2",
    "@graphql-codegen/gql-tag-operations-preset": "^1.6.0",

Codegen Config File

import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  overwrite: true,
  schema: 'http://localhost:4000',
  documents: 'src/**/*.ts',
  generates: {
    'src/types/gql': {
      preset: 'gql-tag-operations-preset',
      plugins: []
    },
  }
}

export default config

Additional context

No response

ZakKa89 avatar Oct 12 '22 14:10 ZakKa89

Did you find a solution to this?

earthlingdavey avatar Oct 20 '23 08:10 earthlingdavey

@EarthlingDavey Yes please check the mentioned issue above, I changed the client preset

https://github.com/dotansimha/graphql-code-generator/issues/8440#issuecomment-1277265407

ZakKa89 avatar Nov 20 '23 15:11 ZakKa89