Aug 16, 2020 - 600 words, 3 minute reading - tagged with javascript, nodejs, react and strapi

my strapi cheat-sheet

strapi is a really nice headless CMS, very flexible and very productive - but written in javascript. Not sure if the huge amount of flexibility is a prove for the awesomenes of strapi or a prove how broken javascript is …

However, i dive deeper and need a place to write down a few snippets :)

Basics

for environment configurations, just overwrite everything you need in /config/env/STAGE/

// loading configs, in the /config folder
const conf = strapi.config.get('file.object.attribute')

// load a service
const modelService = strapi.services["my-model"]
// load service from a plugin
const pluginService = strapi.plugins['my-plugin'].services['my-plugin-service'];

// working with models
strapi.query('user').find({ _where: {}})
strapi.query('user').findOne({ id: 1})
strapi.query('user').create({})
strapi.query('user').update({id: 1}, {})
strapi.query('user').delete({ id: 1})

// models from plugins
strapi.query('user', 'plugin').create({})

// https://strapi.io/documentation/v3.x/concepts/queries.html#queries

Middlewares

// middlewares/name/index.js
module.exports = strapi => {
  return {
    initialize() {

      // load config
      const conf = strapi.config.get('middleware.settings.name')
      
      strapi.app.use(async (ctx, next) => {

        // code before controller
        await next();
        // code after strapi logic

        // we want to replace image URLs in all graphql responses
        if(ctx.request.url.startsWith(`/graphql`)) {
          // body is plain string
          const replaced = ctx.response.body.replace(new RegExp(conf.original, 'g'), conf.replacement)
          ctx.response.body = replaced

        } 
      });
    },
  };
};

Replacement regex

with a positive lookahead

const matcher = 'https://s3.eu-central-1.amazonaws.com/some-strapi-bucket(?=.*jpg|.*png|.*jpeg)', 
const replacement = 'https://imageproxy.net',

Admin plugins

generate stub

npx strapi generate:plugin pluginName

run admin webpack dev mode

npm run develop -- --watch-admin

The strapi-helper-plugin package

a lot to discover in the code mainly i used

import { auth, request } from 'strapi-helper-plugin';

// request is a extended 'fetch' with admin jwt in the header etc
request("/my-plugin/api")
  .then(content => { console.log("yay, json", content) })

// or retrieve the token to use it directly
const token = auth.getToken();
const xhr = new XMLHttpRequest()
xhr.open('POST', '/my-plugin/upload')
xhr.setRequestHeader('Authorization', 'Bearer '+token)
xhr.upload.onprogress = (e) => {}
xhr.onloadstart = (e) => {}
xhr.onloadend = (e) => {}
xhr.send(droppedFile)

Queries

// create a user from users-permission plugin
strapi.query('user', 'users-permissions').create({
  //
});

// find a specific admin role
const editorRole = await strapi.query('role', 'admin').findOne({ _where: {id: 2} });

// create a editor admin user
strapi.query('user', 'admin').create({
  email: '',
  firstname: '',
  lastname: '',
  isActive: true,
  password: "TODO",
  roles: [editorRole]
});

GraphQL filter queries

someCollection(where: { numberAttr_gte: 3, user: { role: { name: "asdf" } } } ) {
    numberAttr
    asdf
    user {
      id
      email
      role {
        name
      }
    }
  }

Hide fields in the admin interface

This is stolen from the users-permissions plugin, you can create a file [Entity].config.js.

For example in the User model

// models/User.config.js
module.exports = {
  attributes: {
    resetPasswordToken: {
      hidden: true,
    },
    provider: {
      hidden: true,
    },
  },
};

Debugger in vscode

added a debug command to the scripts in the package.json to enable and set the debug port

"scripts": {
  "...": "",
  "debug": "NODE_OPTIONS='--inspect=0.0.0.0:9229' strapi develop",
  "...": "",
},

and the launch.json file for vscode

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "attach strapi",
      "port": 9229,
      "skipFiles": [
        "<node_internals>/**"
      ]
    }
  ]
}

Running in docker

FROM node:12.18.3-alpine

RUN mkdir /app
WORKDIR /app
ADD . .

RUN npm install
# RUN cd plugins/yourplugin1/ && npm install
# RUN cd plugins/yourplugin2/ && npm install
RUN NODE_ENV=production npm run build
ENV NODE_ENV=production

EXPOSE 1337
CMD ["npm", "start"]