What is the best way to incorporate and utilize the JavaScript MediaWiki API in my projects?

I find it frustrating that the documentation for this library is lacking, making it difficult to figure out how to import it into my Typescript/React project.

I am attempting to utilize the MediaWiki officially supported library but the examples provided are not comprehensive enough.

Despite searching, I cannot find an import statement in the documentation, leading to confusion on my end.

I have attempted the following code:

import mw from 'mediawiki'
console.log(mw)

However, the object returned is unexpected:

Object { version: "0.0.11", Bot: Bot(config) }

Subsequently, I tried the following, attempting to align with the documentation:

const api = new mw.Bot()

The resulting object does not align with the documentation and does not function as expected.

https://i.sstatic.net/6tXp3.png

Why are the docs misleading? I simply want a library that can help me retrieve categories and pages from a MediaWiki site. Am I missing a fundamental concept that other Javascript developers are aware of? As a career software developer, I engage less frequently with Javascript, so I may be overlooking some key details.

javascripttypescriptmediawiki-apijavascript-import

Answer №1

Summary: Before running npm install mediawiki, make sure to review the package description first.

The documentation you've referenced is related to the mw object found in MediaWiki's frontend through mediawiki.api/index.js. As far as I know, this file is not meant to be installed via npm.

The mediawiki package available on npm differs from the documentation you've linked. It was last updated a decade ago by GitHub user @oliver-moran, not by Wikimedia, the main maintainers of MediaWiki. It also features the mw.Bot API that you're referencing in your screenshot, confirming my earlier suspicion.

If you're set on using the client library you're currently working with, consider incorporating mediawiki.api/index.js into your project, bearing in mind that you'll need to manually manage it and its dependencies (including jQuery). It's uncertain whether this is the intended usage or if it's meant for operations outside of a MediaWiki frontend context.

Moreover, MediaWiki offers guidance on their developer wiki regarding various JavaScript API client libraries that are suitable for your project if the current one doesn't meet your needs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to utilize Array Methods with an Array Union Type

Currently, I am in the process of refactoring an Angular application to enable strict typing. One issue I have encountered is using array methods with an array union type in our LookupService. When attempting to call const lookup = lookupConfig.find(l =&g ...

typescript

What is the best way to save the raw text or event-stream data from a JavaScript get request when the server is continuously loading?

Currently, I'm attempting to fetch some basic data from an API. Here is the URL for the request: The issue lies in the fact that the server appears to keep refreshing the page constantly. This endless loading occurs both when using a browser and with ...

javascriptapihttpgetrequest

`npm run build` in Ubuntu does not detect any environment variables in process.env

Currently in the process of deploying a VueJS project. I have a file that contains API URLs where process.env is used. In production, if API_URL is defined, I can use localhost on my development server and switch to API_URL in production. const apiRoot = p ...

javascriptnode.jsubuntunpmenvironment-variables

Client-side rendering for NextJS server components is also supported

I am currently working with Material UI v5.11.16 in a nextjs environment using v13.3.0. I followed the official documentation setup for my nextjs project which can be found here. So far, I have successfully integrated Material UI components without having ...

javascriptnext.jsmaterial-ui

Prevent accordion expansion triggered by the More button click

When the More button is clicked, it should NOT expand and collapse. https://i.sstatic.net/toV1b.gif If the accordion initial state is open, it must stay open even if button is clicked, if initial state is collapsed then after the more button the accordio ...

javascripthtmljquerycssbootstrap-5

What is the process to verify a password?

Hey everyone! I've successfully implemented control forms in my login.component.ts for handling email and password input. Now, I want to add these controls to my register.component.ts as well. Specifically, how can I implement controls for the passwor ...

angulartypescriptpasswordsangular-reactive-forms

It appears that Serverworker is causing significant delays in processing ajax requests

I'm encountering some performance issues with my PHP app that utilizes a lot of JavaScript for AJAX requests back to the PHP server. I'm currently implementing a service worker to cache content and enable push notifications, but I'm facing d ...

javascriptphpmysqlajaxservice-worker

Utilize formData to upload an image to a database with ajax

I'm struggling with the process of uploading an image from an HTML form. The goal is for the form to send the image name along with other data to a PHP page. Instead of using the serialized function, I opted for formData as it has the capability to h ...

javascriptphpjqueryhtmlajax

Issue with Web Worker functionality in SvelteKit on Firefox version 106.0.5

I've set up a function in my main file like this: const loadWorker = async () => { const SyncWorker = await import("$lib/canvas.worker?worker"); syncWorker = new SyncWorker.default(); syncWorker?.postMessage({}); ...

javascriptnode.jsfirefoxsveltesveltekit

Utilizing transitions to control the visibility of div elements

This is what I have achieved so far: function getOffsetRect(elem) { var box = elem.getBoundingClientRect() var body = document.body var docElem = document.documentElement var scrollTop = window.pageYOffset || docElem.scrollTop || body.sc ...

javascripthtmlcss

The IDE is showing an error, but Jest is able to run it flawlessly

I recently created a Jest unit test for a TypeScript function called checkEmail, which internally uses showAlert. The showAlert function in the utils.ts file looks like this: export const showAlert = (message: string) => { toast(message); }; In my ...

javascriptunit-testingtypescriptecmascript-6jestjs

Unintentional GET request triggered by Axios baseURL

I have encountered a strange issue where defining axios.defaults.baseURL = baseUrl; results in an unexpected GET request right after initializing my Vue app. Any assistance would be greatly appreciated! Below are images showing the code and network reques ...

javascriptvue.jsaxios

The `setState` function is failing to change the current value

I'm having an issue with setting State in the dropdown component of semantic-ui-react while using TypeScript in my code. The selected category value is always returning an empty string "". Any suggestions on how to resolve this problem? impo ...

reactjstypescriptdropdownonchangesemantic-ui-react

What could be the reason behind the repeated console messages when utilizing jquery to replace the src attribute of images?

Overview: An HTML page with two images, identified as #me1 and #me2 The images initially display 1.jpg and 2.jpg Clicking #me1 triggers a GET request to "randim.php" using jQuery to fetch a random filename, which is then set as the src= attribute ...

javascripthtmljqueryajaximage

Using Vue.js to loop through data objects when a button is clicked

I'm currently working on building a quiz functionality using vue.js, but I've hit a roadblock in trying to make the "Next" button cycle through my data. The goal is to have the screen display the object containing the question and answers (e.g. q ...

javascriptvue.jsmethodsiteratorvue-component

Using Vuex to calculate the percentage of values within an array of objects and dynamically updating this value in a component

I'm currently in the process of developing a voting application with Vuex. Within the app, there are buttons for each dog that users can vote for. I have successfully implemented functionality to update the vote count by clicking on the buttons: sto ...

javascriptvue.jsvuex

Guide on how to compare two arrays in JavaScript and identify mismatches by their respective indices

let x=["e","f","g","h"]; let y=["f","e","g","h"]; I want the following result: Inconsistent array from x Inconsistency array=["e", "f"]; ...

javascriptjquery

Combining numerous interfaces into a unified interface in Typescript

I'm struggling to comprehend interfaces in Typescript, as I am facing difficulty in getting them to function according to my requirements. interface RequestData { [key: string]: number | string | File; } function makeRequest(data: RequestData) { ...

typescriptinterfacetypescript-types

Step-by-step guide on populating a state using an array

I am having trouble populating a list within a state using the set method, as the state remains empty App.js // Initiates the secrets word game const startGame = () => { // pick word and pick category const { word, category } = pickWordAndCat ...

javascriptreactjsarraysuse-state

What is the best method for expanding nodes after the tree has been loaded?

Greetings! I am currently working on a web application using Angular 5. One of the features I have implemented is loading trees onto my webpage. These trees are populated with data from an API and are designed to be dynamic. After loading the tree, my goal ...

angulartypescriptsettimeout