Loading queries from .graphql files and use them with apollo client and react

Help
1

Hi guys basicalle I’m creating an app using react, graphql and apollo client, currently I,m loading the queries from a .tsx file with this kind of structure

const MULTIPLE_WELLS_FROM_TAO2 = gql`
  query {
    query_multiple_wells_from_tao2db {
      selected_well {
        opru_fld_nme {
          value
        }
        prod_govt_lse_nbr {
          value
        }
        well_cmpl_seq_nbr {
          value
        }
      }
    }
  }
`;

and using it like

import MULTIPLE_WELLS_FROM_TAO2 from "my directory"

const { loading, data } = useQuery(MULTIPLE_WELLS_FROM_TAO2);

But my question is, is there a way to load this kind of queries but instead of using .tsx or .js files using .graphql files and use them like the one that I mentioned?

2

That depends on your setup, but in every case you will have to set some tool up.
There are babel plugins and webpack plugins, or you can use the GraphQL Codegen to generate .ts files from your .graphql files.