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

**URL:** <https://community.apollographql.com/t/loading-queries-from-graphql-files-and-use-them-with-apollo-client-and-react/7014>\
**Category:** Client SDKs\
**Tags:** client, web\
**Created:** [December 1, 2023, 5:42pm UTC](https://community.apollographql.com/t/loading-queries-from-graphql-files-and-use-them-with-apollo-client-and-react/7014 "2023-12-01T17:42:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Angel\_Gabriel\_Chable](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/angel_gabriel_chable/32/4768_2.png) [@Angel\_Gabriel\_Chable](https://community.apollographql.com/u/Angel_Gabriel_Chable)\
**Post date:** [December 1, 2023, 5:42pm UTC](https://community.apollographql.com/t/loading-queries-from-graphql-files-and-use-them-with-apollo-client-and-react/7014/1 "2023-12-01T17:42:03Z")

</div>

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

```auto
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

```auto
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?

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [December 1, 2023, 5:52pm UTC](https://community.apollographql.com/t/loading-queries-from-graphql-files-and-use-them-with-apollo-client-and-react/7014/2 "2023-12-01T17:52:56Z")

</div>

That depends on your setup, but in every case you will have to set some tool up.  
There are [babel plugins](https://www.apollographql.com/docs/react/performance/babel/) and [webpack plugins](https://www.apollographql.com/docs/react/integrations/webpack/), or you can use the GraphQL Codegen to generate `.ts` files from your `.graphql` files.

---

<div class="post-metadata">

**Author:** ![Justin\_Gonzalez](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/justin_gonzalez/32/5359_2.png) [@Justin\_Gonzalez](https://community.apollographql.com/u/Justin_Gonzalez)\
**Post date:** [February 6, 2025, 8:47pm UTC](https://community.apollographql.com/t/loading-queries-from-graphql-files-and-use-them-with-apollo-client-and-react/7014/3 "2025-02-06T20:47:50Z")

</div>