GraphQL - Cannot move resolver to a separate file - javascript

I have searched the forum for anything related to customizing GraphQL in Strapi v4 but found nothing.
Note: my GraphQL skills is a novice.
I extended my GraphQL resolver in Strapi v4, and it worked fine as long as the resolver was in the same file as "index.ts." I want to modularize my GraphQL code by moving the resolver into a separate file. When I did that, I kept getting the following error:
"resolvers" is defined in the resolver but not in the schema.
Below is my resolver embedded in the file index.ts, which works fine without any issue.
index.ts
/**
* Extend register for GraphQL
*/
register({ strapi }): void {
// customized programmatically using GraphQL's extension
const extensionService = strapi.plugin("graphql").service("extension");
const UID = "api::truth-lending-disclosure.truth-lending-disclosure";
extensionService.use(({ strapi }) => ({
typeDefs: ``,
resolvers: {
Query: {
truthLendingDisclosures: async (parent, args, context) => {
// toEntityResponse method to allow us to convert our response
// to the appropriate format before returning the data.
const { toEntityResponseCollection } = strapi
.plugin("graphql")
.service("format").returnTypes;
// define level to populate
let _populate = {
body: {
populate: {
section: true,
},
},
};
// using shadow CRUD from entity service to fetch data
let entities = await strapi.entityService.findMany(UID, {
populate: _populate,
});
// find and replace placeholder with key-value risCustomerTermDataMap
// return the result as JSON string
let stringResult = dataSubstitution(
JSON.stringify(entities), // convert an object to JSON string
risCustomerTermDataMap
);
// conver JSON string back object
let objectResult = JSON.parse(stringResult);
debugger;
return toEntityResponseCollection(objectResult);
},
},
},
}));
},
Moved the resolvers logic into a separate file mycustom.resolvers.ts
mycustom.resolvers.ts
import { risCustomerTermDataMap } from "../../../../libs/common/risaCustomerTermDataMap";
import { dataSubstitution } from "../../../../libs/helpers/dataSubstitution";
// the logic in this file does not work with index.ts yet
// keep getting "resolvers" define in resolvers, but not in schema.
export const resolvers = {
Query: {
truthLendingDisclosures: async (parent, args, context) => {
console.log("***** GraphQL Resolvers*****");
const UID = "api::truth-lending-disclosure.truth-lending-disclosure";
// toEntityResponse method to allow us to convert our response
// to the appropriate format before returning the data.
const { toEntityResponseCollection } = strapi
.plugin("graphql")
.service("format").returnTypes;
// define level to populate
let _populate = {
body: {
populate: {
section: true,
},
},
};
// using shadow CRUD from entity service to fetch data
let entities = await strapi.entityService.findMany(UID, {
populate: _populate,
});
// find and replace placeholder with key-value risCustomerTermDataMap
// return the result as JSON string
let stringResult = dataSubstitution(
JSON.stringify(entities), // convert an object to JSON string
risCustomerTermDataMap
);
// conver JSON string back object
let objectResult = JSON.parse(stringResult);
debugger;
return toEntityResponseCollection(objectResult);
},
},
};
What am I missing?

Finally,I got it to work.
I modified my resolver in the external file "mycustom.resolvers.ts" to this:
filename: mycustom.resolvers.ts
export const truthLendingDisclosureResolvers = {
Query: {
async truthLendingDisclosures(): Promise<any> {
console.log("***** external resolver *****");
const UID = "api::truth-lending-disclosure.truth-lending-disclosure";
// toEntityResponse method to allow us to convert our response
// to the appropriate format before returning the data.
const { toEntityResponseCollection } = strapi
.plugin("graphql")
.service("format").returnTypes;
// define level to populate
let _populate = {
body: {
populate: {
section: true,
},
},
};
// using shadow CRUD from entity service to fetch data
let entities = await strapi.entityService.findMany(UID, {
populate: _populate,
});
// find and replace placeholder with key-value risCustomerTermDataMap
// return the result as JSON string
let stringResult = dataSubstitution(
JSON.stringify(entities), // convert an object to JSON string
risCustomerTermDataMap
);
// conver JSON string back object
let objectResult = JSON.parse(stringResult);
return toEntityResponseCollection(objectResult, {
args: {},
resourceUID: UID,
});
},
},
};
and modified the "index.ts" to this:
filename: index.ts
register({ strapi }): void {
// customized programmatically using GraphQL's extension
const extensionService = strapi.plugin("graphql").service("extension");
const UID = "api::truth-lending-disclosure.truth-lending-disclosure";
// disable an action on a query
// extensionService.shadowCRUD(UID).disableAction("find");
extensionService.use(({ strapi }) => ({
typeDefs: ``,
resolvers: truthLendingDisclosureResolvers,
}));
},

Related

Unit Testing for dynamodb-onetable

I am new to Unit Testing and wanted to stub dynamodb-onetable library. I was trying to stub getData() from getDetails.ts file but it shows that "OneTableArgError: Missing Name Property". Because this getProjectDetails() contain new Table() class.
How to stub dynamodb-onetable so that I can get data in dataDetails variable. I was doing something like this in getEmp.spec.ts
dataDetailsStub = sinon.stub(DataService , "getData");
------lambda.ts
import { DynamoDBClient } from '#aws-sdk/client-dynamodb';
import Dynamo from 'dynamodb-onetable/Dynamo';
export const client = new Dynamo({
client: new DynamoDBClient({
region: REGION, }),
});
-------DataService.ts
import { client } from '../lambda';
const workspaceTable = new Table({
client,
name: TableName,
schema,
logger: true,
partial: false,
});
const projectDetail = workspaceTable.getModel('empDetail');
export default class **DataService** {
static getData = async (empId: string, type: string) => {
const params = {
projectId,
type
};
const response = await empDetail.find(params);
logger.trace('response', { response });
return response; };
}
------getDetails.ts
const dataDetails= await DataService.getData(
empId,
'EMPLOYEE-SAVEDATA'
);
I was trying to stub the DataService.getData() but getting error saying "OneTableArgError: Missing "name" property". I want to get data in dataDetailsStub whatever i am sending while mocking the getData()
const dataDetailsStub = sinon.stub(DataService , "getData").return({emp object});
Can anyone help me out on this. I'm really got stuck in this. Thanks in advance

How to fetch Strapi by slug, and how to populate the categories

I'm trying to fetch post for a react blog with strapi backend using the slug.
I created the custom route and custom controller, but the value returned is missing a few attributes like images and category.
When I fetch using post Id, I use query string to populate the object returned, but I don't know how to had qs to the slug API route.
Below is the custom controller, and the custom route
///custom controller
async findOne(ctx) {
const { slug } = ctx.params;
const { query } = ctx;
const entity = await strapi.service('api::article.article').findOne(slug, query);
const sanitizedEntity = await this.sanitizeOutput(entity, query);
return this.transformResponse(sanitizedEntity);
}
///Custom Route
{
method: 'GET',
path: '/articles/slug/:slug',
handler: 'custom-controller.findOne',
config: {
policies: []
},
This is how I fetch from client in useEffect
useEffect(()=>{
const fetchData = async()=>{
// const query = qs.stringify({
// populate: '*',
// }, {
// encodeValuesOnly: true,
// });
const res = await axios.get(`http://localhost:1337/api/articles?filters[slug][$eq]=${slug}`)
console.log(res.data)
updateState(res.data)
}
fetchData()
setLoading(false)
}, [slug])
I've also tried to use the Entity API Service, but I just couldn't get it to work.
How do I populate the object to include these missing attributes?
With Strapi v4 you can do it this way
1. Create a file in src/api/article/_custom.js
Please note I put an underscore because:
Routes files are loaded in alphabetical order. To load custom routes before core routes, make sure to name custom routes appropriately (e.g. 01-custom-routes.js and 02-core-routes.js).
Source: https://docs.strapi.io/developer-docs/latest/development/backend-customization/routes.html#creating-custom-routers
module.exports = {
routes: [
{
method: 'GET',
path: '/articles/:slug',
handler: 'article.findOne',
config: {
auth: false
},
}
]
}
2. Edit the src/api/article/controllers/article.js
'use strict';
/**
* article controller
*/
const { createCoreController } = require('#strapi/strapi').factories;
module.exports = createCoreController('api::article.article', ({ strapi }) => ({
// Query by slug
async findOne(ctx) {
// thanks to the custom route we have now a slug variable
// instead of the default id
const { slug } = ctx.params;
const entity = await strapi.db.query('api::article.article').findOne({
where: { slug }
});
const sanitizedEntity = await this.sanitizeOutput(entity, ctx);
return this.transformResponse(sanitizedEntity);
},
}));
Now you can call your api this way:
http://localhost:1337/api/articles/my-beautiful-article-about-orange
Reference: https://www.youtube.com/watch?v=OVV0CfgX6Qk
Note: In the video, custom.js is loaded before post.js ^^

How to validate GitHub webhook with Deno?

I'm trying to make a GitHub webhook server with Deno, but I cannot find any possible way to do the validation.
This is my current attempt using webhooks-methods.js:
import { Application } from "https://deno.land/x/oak/mod.ts";
import { verify } from "https://cdn.skypack.dev/#octokit/webhooks-methods?dts";
const app = new Application();
app.use(async (ctx, next) => {
try {
await next();
} catch (_err) {
ctx.response.status = 500;
}
});
const secret = "...";
app.use(async (ctx) => {
const signature = ctx.request.headers.get("X-Hub-Signature-256");
if (signature) {
const payload = await ctx.request.body({ type: "text" }).value;
const result = await verify(secret, payload, signature);
console.log(result);
}
ctx.response.status = 200;
});
The verify function is returning false every time.
Your example is very close. The GitHub webhook documentation details the signature header schema. The value is a digest algorithm prefix followed by the signature, in the format of ${ALGO}=${SIGNATURE}:
X-Hub-Signature-256: sha256=d57c68ca6f92289e6987922ff26938930f6e66a2d161ef06abdf1859230aa23c
So, you need to extract the signature from the value (omitting the prefix):
const signatureHeader = request.headers.get("X-Hub-Signature-256");
const signature = signatureHeader.slice("sha256=".length);
Update: Starting in release version 3.0.1 of octokit/webhooks-methods.js, it is no longer necessary to manually extract the signature from the header — that task is handled by the verify function. The code in the answer has been updated to reflect this change.
Here's a complete, working example that you can simply copy + paste into a project or playground on Deno Deploy:
gh-webhook-logger.ts:
import { assert } from "https://deno.land/std#0.177.0/testing/asserts.ts";
import {
Application,
NativeRequest,
Router,
} from "https://deno.land/x/oak#v11.1.0/mod.ts";
import type { ServerRequest } from "https://deno.land/x/oak#v11.1.0/types.d.ts";
import { verify } from "https://esm.sh/#octokit/webhooks-methods#3.0.2?pin=v106";
// In actual usage, use a private secret:
// const SECRET = Deno.env.get("SIGNING_SECRET");
// But for the purposes of this demo, the exposed secret is:
const SECRET = "Let me know if you found this to be helpful!";
type GitHubWebhookVerificationStatus = {
id: string;
verified: boolean;
};
// Because this uses a native Request,
// it can be used in other contexts besides Oak (e.g. `std/http/serve`):
async function verifyGitHubWebhook(
request: Request,
): Promise<GitHubWebhookVerificationStatus> {
const id = request.headers.get("X-GitHub-Delivery");
// This should be more strict in reality
assert(id, "Not a GH webhhok");
const signatureHeader = request.headers.get("X-Hub-Signature-256");
let verified = false;
if (signatureHeader) {
const payload = await request.clone().text();
verified = await verify(SECRET, payload, signatureHeader);
}
return { id, verified };
}
// Type predicate used to access native Request instance
// Ref: https://github.com/oakserver/oak/issues/501#issuecomment-1084046581
function isNativeRequest(r: ServerRequest): r is NativeRequest {
// deno-lint-ignore no-explicit-any
return (r as any).request instanceof Request;
}
const webhookLogger = new Router().post("/webhook", async (ctx) => {
assert(isNativeRequest(ctx.request.originalRequest));
const status = await verifyGitHubWebhook(ctx.request.originalRequest.request);
console.log(status);
ctx.response.status = 200;
});
const app = new Application()
.use(webhookLogger.routes())
.use(webhookLogger.allowedMethods());
// The port is not important in Deno Deploy
await app.listen({ port: 8080 });

Next.js ISR pass additional data to getStaticProps from getStaticPaths

In SingleBlogPost.jsx i have:
export async function getStaticPaths() {
const res = await fetch("http://localhost:1337/api/posts");
let { data } = await res.json();
const paths = data.map((data) => ({
params: { slug: data.attributes.slug },
}));
return {
paths,
fallback: "blocking",
};
}
where I generate blog pages by their slug.
But then in getStaticProps I need to fetch single post by slug but I want to do it by id.
export async function getStaticProps(context) {
console.log("context", context);
const { slug } = context.params;
console.log("slug is:", slug);
const res = await fetch("http://localhost:1337/api/posts");
const { data } = await res.json();
return {
props: {
data,
},
revalidate: 10, // In seconds
};
}
And I want to keep url like /blog/:slug , I dont want to include id. in url .When I already fetch all posts in getStaticPaths how I can access post id in getStaticProps to avoid fetching by slug?
You can filter your API response by your slug to get the same result
const res = await fetch(`http://localhost:1337/api/posts?filters[slug][$eq]${slug}`);
This will generate your desired result
It looks like recently released a workaround using a file system cache.
The crux of the solution is that they save the body object in memory, using something like this:
this.cache = Object.create(null)
and creating methods to update and fetch data from the cache.
Discussion here: https://github.com/vercel/next.js/discussions/11272#discussioncomment-2257876
Example code:
https://github.com/vercel/examples/blob/main/build-output-api/serverless-functions/.vercel/output/functions/index.func/node_modules/y18n/index.js#L139:10
I found a concise work around that uses the object-hash package. I basically create a hash of the params object and use that to create the tmp filename both on set and get. The tmp file contains a json with the data I want to pass between the two infamous static callbacks.
The gist of it:
function setParamsData({params, data}) {
const hash = objectHash(params)
const tmpFile = `/tmp/${hash}.json`
fs.writeFileSync(tmpFile, JSON.stringify(data))
}
function getParamsData (context) {
const hash = objectHash(context.params)
const tmpFile = `/tmp/${hash}.json`
context.data = JSON.parse(fs.readFileSync(tmpFile))
return context
}
We can then use these helpers in the getStaticPaths and getStaticProps callbacks to pass data between them.
export function getStaticPaths(context) {
setParamsData({...context, data: {some: 'extra data'})
return {
paths: [],
fallback: false,
}
}
export function getStaticProps(context) {
context = getParamsData(context)
context.data // => {some: 'extra data'}
}
I'm sure someone can think of a nicer API then re-assigning a argument variable.
The tmp file creation is likely not OS independent enough and could use some improvement.

Non CRUD Route in FeathersJS

I have a service results that handles all CRUD Operations for the results service in feathersjs. How would I create a route /results/:id/hr_bar_graph which basically fetches the result at that particular id and uses the resulting data to create an bar graph.
My code currently is:
module.exports = function (app) {
const Model = createModel(app);
const paginate = app.get('paginate');
const options = {
name: 'results',
Model,
paginate
};
// Initialize our service with any options it requires
app.use('/results', createService(options));
app.use('/results/:id/hr_bargraph_image', {
find(id, params){
this.app.service('results').get(id)
.then(function(response){
console.log(response);
})
.cathc(function(error){
console.log(error);
})
return Promise.resolve({
imageData: ''
});
}
});
// Get our initialized service so that we can register hooks and filters
const service = app.service('results');
service.hooks(hooks);
};
Been stuck here for a while now. Please help.
For reference, from this issue, the answer is to use params.route and Feathers normal find(params):
module.exports = function (app) {
const Model = createModel(app);
const paginate = app.get('paginate');
const options = {
name: 'results',
Model,
paginate
};
// Initialize our service with any options it requires
app.use('/results', createService(options));
app.use('/results/:id/hr_bargraph_image', {
async find(params){
const { id } = params.route;
const results = await app.service('results').get(id);
return {
imageData: ''
};
}
});
// Get our initialized service so that we can register hooks and filters
const service = app.service('results');
service.hooks(hooks);
};

Categories