Absolute imports possible?

[philr35]

I was wondering if absolute imports are possible. It does not seem like they work properly in create-react-app with the loader

I'm currently doing this which is not ideal:

const ADD_BOOK = loader("../../../../queries/book/list/add_book.gql");
const ALL_BOOKS = loader("../../../../queries/book/list/book_list.gql");

Any way to make this a non-relative import? I have absolute imports set for my create-react-app, but it does not work with the loader.

I would like to be able to do this:

const ADD_BOOK = loader("queries/book/list/add_book.gql");
const ALL_BOOKS = loader("queries/book/list/book_list.gql");

Any advice would be appreciated, thanks!

[tubbo]

I have a similar issue. Using yarn workspace to separate the API, data layer (all the GraphQL stuff), and UI. The packages are all @scoped so they have names like @my-app/api and @my-app/data.

In the UI, generated by Create React App, I have the following:

const HelloWorld = loader('@my-app/data/queries/hello-world.gql')

When this is executed, I get the following error:

Error: /Users/tscott/Code/my-app/ui/src/home.js: graphql.macro: ENOENT: no such file or directory, open '/Users/tscott/Code/my-app/ui/node_modules/@my-app/data/queries/hello-world.gql' Learn more: https://www.npmjs.com/package/graphql.macro

I believe this is due to the fact that Yarn workspaces have a top-level node_modules/ directory, and graphql.macro is looking in the wrong place for the dependency.