Unable to find any GraphQL type definitions for the following pointers: src/**/*.graphql

Question

I am using the @graphql-codegen/cli tool to generate typescript types out of my graphql server. Here is my codegen.yml content:

overwrite: true
schema: "http://localhost:3001/graphql"
documents: "src/**/*.graphql"
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
  ./graphql.schema.json:
    plugins:
      - "introspection"

Here is the package.json script I use to generate my types (yarn schema):

"schema": "graphql-codegen --config codegen.yml"

All these have been automatically generated by executing the cli wizard yarn codegen init.

But when I run yarn schema, these are the errors I get:

(server is positively running at http://localhost:3001/graphql and exposes the graph schema.

Thanks for your help and suggestion

Here is the .graphql file hosted in my server (http://localhost:3001/graphql

# -----------------------------------------------
# !!! THIS FILE WAS GENERATED BY TYPE-GRAPHQL !!!
# !!!   DO NOT MODIFY THIS FILE BY YOURSELF   !!!
# -----------------------------------------------

"""Date custom scalar type"""
scalar Date

type Mutation {
  create_user(user: UserInput!): User!
  create_pofficer(pofficer: POfficerCreateInput!): POfficer!
  create_incident(incident: TIncidentInput!): TIncident!
  add_incident_type(incident_type: TIncidentTypeInput!): TIncidentType!
}

type POfficer {
  _id: ID!
  userid: ID!
  user: User!
}

input POfficerCreateInput {
  name: String!
  surname: String!
  phone: String!
}

type Query {
  users: [User!]!
  pofficers: [POfficer!]!
  incidents: [TIncident!]!
  incident_types: [TIncidentType!]!
}

type TIncident {
  _id: ID!
  createdAt: Date!
  incidenttype_id: ID!
  pofficer_id: ID!
  toffender_id: ID
  toffender_phone: String!
  carnumber: String!
  incident_status: String!
  pofficer: POfficer!
  toffender: User!
  incident_type: TIncidentType!
}

input TIncidentInput {
  incidenttype_id: ID!
  pofficer_id: ID!
  toffender_phone: String!
  carnumber: String!
}

type TIncidentType {
  _id: ID!
  name: String!
  description: String
}

input TIncidentTypeInput {
  name: String!
  description: String
}

type User {
  _id: ID!
  name: String!
  surname: String!
  email: String
  phone: String!
}

input UserInput {
  name: String!
  surname: String!
  email: String!
  phone: String!
}

Waylonwayman

Did you create any .graphql files with a query or a mutation? Could you post them here? – Disinfest

@Disinfest I have edited my question and I have added the .graphql file hosted and exposed by my server at http://localhost:3001/graphql – Waylonwayman

Answer 1

The file your shared is your schema (as generated by your server), but it seems that you haven't created any queries or mutations on top of it. This would be a reason why the codegen is not working properly.

I suggest thay you create a new file with a simple query, such as: get-users.query.graphql

query GetUsers {
  user {
    _id
    __typename
    name
    surname
    email
    phone
  }
}

And add it to your src folder (since your codegen is configured to find all .graphql files inside your src folder). Then re-run the codegen and see if it works well.

Aftewards you can generated all kinds of .graphql files with your queries and mutations and use the codegen to generate the corresponding types.

Disinfest

Thanks @Felipe. I have marked your suggestion as the solution to my issue – Waylonwayman

Why do I have to manually create these queries and mutations? Could the generator not automatically pick them up for me? – Pickmeup

Yes, these are the queries and mutations that you are going to execute on your server. The definitions for the available queries and mutations provided by your server are automatically generated by the codegen. – Disinfest

@Disinfest can you explain that further? Why do the queries nee to be declared in a dedicated file? The generator could not create the queries by using the introspection feature? – Waterfowl

@Waterfowl 1) They don't have to be in a dedicated file. They can all be in one file. 2) Introspection just sucks as right now because of TS limits. See type-graphql for example. 3) Generating types from schema is much cleaner then the other way around, less error prone, less work overall. I tried literally all TS frameworks for graphql and this method is my all time favourite. – Gregorio

This solution doesn't work for me. I'm starting a new question. – Ezana

Answer 2

In my case I refactored all my queries into a single file in a new folder: lib/queries.tsx.

What I needed to do then is add that filepath to codegen.yml:

documents:
  - "./lib/queries.tsx"

Frustule

Answer 3

Specificity in the 'documents' codegen.yml file

You must be careful in the documents field, because when you init graphql-code, the default value is the one provided in the example (src/**/*.graphql), but this is considering a React app in most cases.

However, in my case I use Next and there is no src directory (although create-next-app gives you the option to have a src dir). So, I need to specify where those files with the extension .graphql are going to be exactly.

Why .graphql files are needed

In other news, the .graphql file or files are necessary because we are telling codegen what data we want to request and therefore, the codegen is supposed to generate the types for us.

As you know, you may require all the data in the graphql API or just a part of it. In any case, codegen is going to get only the types of the data you are requesting.

If you do not create any .graphql file, codegen is not going to produce any types for you, since it does not know what it's looking for.

Stratton

Answer 4

please check the suffix of your operation files and change this file based on that, maybe your file suffix is .ts or .js and by default in codegen.yml document is

documents: "src/**/*.graphql"    

replace the .graphql to the suffix of your operation file name like .ts or .js

That was my problem, or maybe the documents address is wrong

Vander

Answer 5

In some cases, this error could be the result of having spaces in the absolute path of your project. e.g.: /home/my project folder with spaces/node_modules/*

Resht