GraphQL queries in Separate File (gql, graphql)

Question

I am working on project with teachnology combination of React + Postgraphile (GraphQL) + axios(http request to postgraphile server).

It has lots of GraphQL queries. Initially started with queries in same file with the other JavaScript and rendering code but it became messy as soon as specific queries has been added.

While searching I came to know that we can detach queries into separate files - .graphql or .gql For this to allow I have to integrate with Webpack module -

I wanted to know if there is simpler(kind of out of the box) way to achieve similar thing without using Webpack as it needs lots of configuration in place.

Any pointers or examples will be really helpful.

Thank you.

Answer 1

On the client, we typically create a mirrored tree of the pages directory under graphql then create js or ts files with the query exported! Then importing it where needed (in our case the graphql client request body).

So for example:

export const GET_TEAM_QUERY = `
  query {
    // your query here
  }
`

Hope that helps!