npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mahudas/apollo4

v0.1.0

Published

Apollo v4 plugin for Mahudas.

Downloads

89

Readme

@mahudas/apollo4

這是使用Apollo v4版本的Mahudas plugin。

Dependencies

  • mahudas^0.2.0
  • @apollo/server^4.10.4
  • @graphql-tools/load-files^7.0.0
  • @graphql-tools/merge^9.0.4
  • dataloader^2.2.2

使用

Standalone

npm i
npm run mahudas

As a plugin

如同一般的plugin,透過npm安裝之後,在Application的plugin.env.js裡設定啟用。

npm i @mahudas/apollo4 -s
// config/plugin.deafult.js
module.exports = {
  apollo4: {
    enable: true,
    package: '@mahudas/apollo4',
  },
}

設定

v0.1.0版本開始,config.apollo4接受可以使用Array來啟動多個路徑的Apollo。
設定參數相同,只是可以使用Array設定。

// config/config.default.js
module.exports = {
  apollo4: {
    path: '/gql',
    typeDefsDir: 'app/gql/typedef',
    resolversDir: 'app/gql/resolver',
    options: {
      typeDefs,
      resolvers,
      schema,
    },
  },
}

參數 | 說明 --- | --- path | gql呼叫的path typeDefsDir | 定義typedef檔案的目錄 resolversDir | 定義resolver檔案的目錄 options.typeDefs | 已經寫好的typedefs,如果此參數有值,會忽略typeDefsDir options.resolvers | 已經寫好的resolvers,如果此參數有值,會忽略resolversDir schema | 已經合併的schema,很少被使用,如果此參數有值,會忽略typedefs跟resolvers的設定

對於Mahudas context的擴充

@mahudas/apollo4 對context進行了擴充:

ctx.gql.useDataLoader(name:String, fn: Function):DataLoader

@mahudas/apollo4預設會自動啟用一個plugin,用來在ctx階段時存取多個resolvers之間共用的DataLoader。
DataLoader是以名稱為key值,如果name不存在,就會新增一個DataLoader,若是name已經存在,就會返回相對應的DataLoader。

// some_resolver.js
module.exports = {
  Query: {
    me: async (rootValue, args, ctx) => {  
      // 這邊會以users這個名稱為依據來取得DataLoader
      const userDataLoader = ctx.gql.useDataLoader('users', async(user_ids) => {
        // ... do somthing
        return returnData;
      });
      const me = await userDataLoader.load(myid);
      return me;
    },
  }
}

ctx.gql.parseInfo(info:Object, deepPath:Sring|[String]):[String]

parseInfo是用來解析query裡的fields,以方便開發者用來判斷要如何處理回傳資料。
其中,info參數為resolver接收到的第四個參數。
deepPath是一個String或String陣列,表示要往子層級尋找的深度。
例如有一個typedef如下:

type User {
  email: String
  friends: Friend
}

type Friend {
  email: String
  gender: String
}

如果我們想知道這次User的query是否有查詢User.Friend之下的gender欄位:

// some_resolver.js
module.exports = {
  Query: {
    test: async (rootValue, args, ctx, info) => { 
      const fs = ctx.gql.parseInfo(info, ['friends']);
      console.log(fs); // ['email', 'gender'] 則表示兩個欄位都被選擇了
      return {};
    },
  }
}

DataLoader

基本上只是讓開發者可以快速使用 DataLoader
DataLoader是用來當有類似query情況的話,用來減少資料庫多次query負擔的工具,在GraphQL的使用上算是常見,因此將它加入到context裡以方便使用。
DataLoder的使用方式可以參考 這裡

const dataloader = new ctx.gql.DataLoader(async(id)=> {
  // ... do something
  return result;
});
const idResult = await dataloader.load(userid);

透過config.env.js擴充Apollo的ctx

除了使用Mahudas本身的extends來擴充context以外,Apollo本身也有一個設定可以擴充context,這個設定可以透過config.env.js裡的apollo4.options來達成。

以下範例可以讓開發者在 resolver 裡的 ctx 直接取得 ctx.dataloaders 這個空物件。

// config.env.js
module.exports = {
  apollo4: {
    // ...
    options: {
      // 接收Mahudas的ctx為參數
      // "只需"回傳需要擴充的Object就好,回傳型別必須是Object
      context: async (ctx) => {
        const toExt = {
          dataloaders: {},
        };
        return toExt;
      },
    },
  },
}