Storybook does not resolve .graphql file imports

Describe the bug Storybook cannot import .graphql files. I’m trying to use graphql-tag/loader, which I’m using in a react create project that uses typescript. It works fine in the app itself but when running storybook it does not resolve correctly.

To Reproduce Steps to reproduce the behavior:

1. Create a storybook project
2. Add graphql/tag to webpack config (info below)
3. Include an import of a graphql file within your project/stories
4. Start storybook
5. Observe it does not import correctly

Expected behavior The import should resolve to a graphql object.

Actual behaviour The import resolves to the filename e.g. “static/media/create.d41dd6c7.graphql”

System:

System:
    OS: macOS 10.15.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 12.13.1 - /usr/local/bin/node
    Yarn: 1.19.2 - /usr/local/bin/yarn
    npm: 6.12.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 79.0.3945.117
    Safari: 13.0.3
  npmPackages:
    @storybook/addon-actions: 5.3.7 => 5.3.7 
    @storybook/addon-docs: 5.3.7 => 5.3.7 
    @storybook/addon-links: 5.3.7 => 5.3.7 
    @storybook/addon-storyshots: 5.3.7 => 5.3.7 
    @storybook/addon-viewport: ^5.3.1 => 5.3.7 
    @storybook/addons: 5.3.7 => 5.3.7 
    @storybook/preset-create-react-app: ^1.5.0 => 1.5.2 
    @storybook/react: 5.3.7 => 5.3.7 

Additional context The following is added to the webpack.config.js rules of storybook:

{
    test: /\.(graphql|gql)$/,
    exclude: /node_modules/,
    loader: "graphql-tag/loader",
}

the following added to the extensions:

config.resolve.extensions.push(".graphql")

[afrankel-sfdo]

@ian-callaghan ran into the same problem. solved by adding to main.js:

  addons: [
    {
      name: '@storybook/preset-create-react-app',
      options: {
        craOverrides: {
          fileLoaderExcludes: ['graphql'], // THIS
        },
      },
    },
  ],
  webpackFinal: async (config, { configType }) => {

    // and THIS
    config.module.rules.push({ 
      test: /\.graphql$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader',
    });

    return config;
  },

[cybervaldez]

This works for me. From the Apollo graphQL docs:

create-react-app can’t use the Webpack loaders unless ejected. To make the same transformation work in create-react-app without ejecting, use graphql.macro.

import { loader } from 'graphql.macro';
const currentUserQuery = loader('./currentUser.graphql');