FROM CACHE - jp_header
解決済

node.js環境でのapp構築 API_KEYが取得できない

cheche0830
Shopify Partner
14 1 0

https://github.com/Shopify/shopify-api-node/blob/main/docs/getting_started.md

を参考にnode.js環境でカスタムアプリを通してadmin APIの操作を行いたいのですが、環境構築で戸惑っております。

 

参考サイトの工程はすべてすませ(アプリも管理画面で作成後、トークン取得済み)たのですが、

yarn startをすると下記のエラーとなります。

src/index.ts:7:3 - error TS2322: Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.

7   API_KEY,
    ~~~~~~~

  node_modules/@shopify/shopify-api/dist/base-types.d.ts:4:5
    4     API_KEY: string;
          ~~~~~~~
    The expected type comes from property 'API_KEY' which is declared here on type 'ContextParams'

src/index.ts:8:3 - error TS2322: Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.

8   API_SECRET_KEY,
    ~~~~~~~~~~~~~~

  node_modules/@shopify/shopify-api/dist/base-types.d.ts:5:5
    5     API_SECRET_KEY: string;
          ~~~~~~~~~~~~~~
    The expected type comes from property 'API_SECRET_KEY' which is declared here on type 'ContextParams'

src/index.ts:9:12 - error TS2322: Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.

9   SCOPES: [SCOPES],
             ~~~~~~

src/index.ts:10:14 - error TS2532: Object is possibly 'undefined'.

10   HOST_NAME: HOST.replace(/https?:\/\//, ""),
                ~~~~

src/index.ts:18:7 - error TS6133: 'ACTIVE_SHOPIFY_SHOPS' is declared but its value is never read.

18 const ACTIVE_SHOPIFY_SHOPS: { [key: string]: string | undefined } = {};
         ~~~~~~~~~~~~~~~~~~~~


Found 5 errors in the same file, starting at: src/index.ts:7

 

index.tsは下記の感じです。

import Shopify, { ApiVersion } from '@shopify/shopify-api';
require('dotenv').config();

const { API_KEY, API_SECRET_KEY, SCOPES, HOST, HOST_SCHEME } = process.env;

Shopify.Context.initialize({
  API_KEY,
  API_SECRET_KEY,
  SCOPES: [SCOPES],
  HOST_NAME: HOST.replace(/https?:\/\//, ""),
  HOST_SCHEME,
  IS_EMBEDDED_APP: true,
  API_VERSION: ApiVersion.October21 // all supported versions are available, as well as "unstable" and "unversioned"
});

// Storing the currently active shops in memory will force them to re-login when your server restarts. You should
// persist this object in your app.
const ACTIVE_SHOPIFY_SHOPS: { [key: string]: string | undefined } = {};

 

.envファイルは以下です。

SHOP=https://testsite.myshopify.com
API_KEY=df80870a5a38ff4a61ee2acb //dummy
API_SECRET_KEY=7d4a70d4363b1219bced261c //dummy
SCOPES=write_order_edits,read_order_edits
HOST=http://4447-2400-2411-1803-f700-303d-a47e-3cfc-8cbf.ngrok.io
HOST_SCHEME=http

 

どうもこの.envファイルが読み込まれてないようなのですが、

ちゃんとプロジェクトのルートトップにあるのですが、原因わかりますでしょうか?

node_moduleのなかにdotenvモジュールもちゃんとあるようなのですが・・

 

ご教授お願いいたします。

1 件の受理された解決策

株式会社フルバランス
Shopify Partner
1441 504 644

成功

Cheche0830 様

 

お世話になっております。

株式会社フルバランスのドウケと申します。

 

「Type 'string | undefined' is not assignable to type 'string'.」

上記エラーは、

node_modules/@shopify/shopify-api/dist/base-types.d.tsで、API_KEYがstring型と宣言していますが、index.tsにおいては、API_KEYがstring型またはundefined型を取るので、undefined型のものをstring型であるAPI_KEYに代入できませんよ、と言われています。(こちらもtypescriptのエラーになります。)

 

そのため、推測ですが、API_KEYがundefined型でないよう担保してあげればよいのだと思います。(下記の方法など)

 

const API_KEY = process.env.API_KEY ? process.env.API_KEY : "";

 もし、API_KEYでうまくイケば他のものでも試していただけますと幸いです。

 

また、差し出がましく恐縮ですが、前回のご質問と合わせるとtypescriptを使わなくてもadmin APIの操作はお試しいただけると思いますので、拡張子をtsからjsにされれば、今回のようなtypescriptのエラーは発生しなくなるかと思います。

 

加えて、お手間でなければ、Shopify CLIで構築されるのも一つの手かと思います。

https://shopify.dev/apps/tools/cli (jsベースでアプリの雛形が構築されます。)

 

ご参考になければ幸いです。

 

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス

元の投稿で解決策を見る

2件の返信2

株式会社フルバランス
Shopify Partner
1441 504 644

成功

Cheche0830 様

 

お世話になっております。

株式会社フルバランスのドウケと申します。

 

「Type 'string | undefined' is not assignable to type 'string'.」

上記エラーは、

node_modules/@shopify/shopify-api/dist/base-types.d.tsで、API_KEYがstring型と宣言していますが、index.tsにおいては、API_KEYがstring型またはundefined型を取るので、undefined型のものをstring型であるAPI_KEYに代入できませんよ、と言われています。(こちらもtypescriptのエラーになります。)

 

そのため、推測ですが、API_KEYがundefined型でないよう担保してあげればよいのだと思います。(下記の方法など)

 

const API_KEY = process.env.API_KEY ? process.env.API_KEY : "";

 もし、API_KEYでうまくイケば他のものでも試していただけますと幸いです。

 

また、差し出がましく恐縮ですが、前回のご質問と合わせるとtypescriptを使わなくてもadmin APIの操作はお試しいただけると思いますので、拡張子をtsからjsにされれば、今回のようなtypescriptのエラーは発生しなくなるかと思います。

 

加えて、お手間でなければ、Shopify CLIで構築されるのも一つの手かと思います。

https://shopify.dev/apps/tools/cli (jsベースでアプリの雛形が構築されます。)

 

ご参考になければ幸いです。

 

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
cheche0830
Shopify Partner
14 1 0

ご回答ありがとうございます!そうですね。typescriptは正直本筋ではないので抜いた状態でまた一から検証したいと思います!