{"id":233918,"date":"2023-02-26T18:29:00","date_gmt":"2023-02-26T15:29:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233918"},"modified":"2022-11-11T13:11:39","modified_gmt":"2022-11-11T10:11:39","slug":"skapa-och-haemta-anpassade-rest-slutpunkter-i-gutenberg-block","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/skapa-och-haemta-anpassade-rest-slutpunkter-i-gutenberg-block\/","title":{"rendered":"Skapa och h\u00e4mta anpassade REST-slutpunkter i Gutenberg-block"},"content":{"rendered":"\n

I det h\u00e4r inl\u00e4gget ska jag f\u00f6rs\u00f6ka skapa en \u00f6versikt \u00f6ver hur man skapar anpassade REST API-slutpunkter och utf\u00f6r f\u00f6rfr\u00e5gningar f\u00f6r dem i ett anpassat Gutenberg-block. Det vill s\u00e4ga att g\u00f6ra f\u00f6rfr\u00e5gningar med fetch<\/code>metoder f\u00f6r information som inte finns i WordPress registrerade datalager.<\/p>\n

En v\u00e4nlig p\u00e5minnelse: den mesta grundl\u00e4ggande informationen finns redan i WordPress datalager. Till exempel \u00e4r grundl\u00e4ggande f\u00f6rfr\u00e5gningar av inl\u00e4gg, sidor, anpassade inl\u00e4ggstyper, taxonomier, f\u00f6rfattare, media och mer tillg\u00e4ngliga i befintligt skick utan att beh\u00f6va skapa dina egna anpassade slutpunkter. F\u00f6r att komma \u00e5t dessa butiker anv\u00e4nder du hellre WordPress k\u00e4rndatamodul (withSelect<\/code>och select()<\/code>). Nedan finns en handledningsdel som g\u00e5r p\u00e5 djupet om hur man g\u00f6r det.<\/p>\n

WordPress REST API<\/h2>\n

Om du inte redan visste; WordPress REST API \u00e4r ett JSON-gr\u00e4nssnitt f\u00f6r att skicka och ta emot data fr\u00e5n din WordPress-webbplats. Den kan anv\u00e4ndas externt eller internt. Med Gutenberg-redigeraren och bytet till Javascript har anv\u00e4ndningen av REST API definitivt \u00f6kat. WordPress REST API har en hel massa slutpunkter som vi kan anv\u00e4nda. Se en fullst\u00e4ndig referens om alla REST API-slutpunkter h\u00e4r<\/a>. Du hittar till exempel slutpunkter f\u00f6r inl\u00e4gg och det mesta annat internt inneh\u00e5ll \u2013 b\u00e5de f\u00f6r l\u00e4sning och uppdatering. Tema- eller plugin-utvecklare kan registrera sina egna anpassade slutpunkter.<\/p>\n

Din WordPress-webbplats har en root REST API URL, som standard finns p\u00e5 <your domain>\/wp-json<\/code>. Till exempel kan en lokal WordPress med URL http:\/\/localhost\/wordpress\/<\/code>komma \u00e5t REST API p\u00e5 http:\/\/localhost\/wordpress\/wp-json<\/code>. D\u00e4rifr\u00e5n m\u00e5ste vi l\u00e4gga till slutpunkter. Med h\u00e4nvisning till ovanst\u00e5ende referens f\u00f6r slutpunkter kan vi h\u00e4mta en lista \u00f6ver senaste inl\u00e4gg i slutpunkten \/wp\/v2\/posts<\/code>. Det betyder att om du g\u00e5r till http:\/\/localhost\/wordpress\/wp-json\/wp\/v2\/posts<\/code>i din webbl\u00e4sare f\u00e5r du ett JSON-formaterat svar p\u00e5 de senaste inl\u00e4ggen p\u00e5 din WordPress-webbplats.<\/p>\n

En notering om namnrymder \u00e4r p\u00e5 sin plats. En REST API-URL b\u00f6rjar med ett namnomr\u00e5de (’ wp\/v2<\/code>’ \u00e4r WordPress’ namnomr\u00e5de som visas i exemplet med webbadresser ovan). Namnutrymmen \u00e4r ett koncept f\u00f6r att undvika sammandrabbningar i k\u00e4rnan i WordPress, teman och plugins som l\u00e4gger till slutpunkter med samma namn. Skapa ditt eget unika namnomr\u00e5de – vanligtvis en snigelform av ditt tema- eller pluginnamn. Efter slug \u00e4r en allm\u00e4n regel att l\u00e4gga till versionsnumret, normalt fr\u00e5n v1. Som ett exempel \u00e4r mitt temas slug ’ awhitepixel<\/code>’, s\u00e5 om jag skulle skapa anpassade slutpunkter i mitt tema skulle jag anv\u00e4nda namnomr\u00e5det ’ awhitepixel\/v1<\/code>’. Med detta namnutrymme kunde jag registrera en slutpunkt ’ posts<\/code>’ och det skulle inte orsaka n\u00e5gra problem \u00e4ven om det \u00e4r identiskt med WordPress’ slutpunktsnamn.<\/p>\n

Att arbeta med REST API i WordPress \u00e4r ett stort \u00e4mne med mycket bra information tillg\u00e4nglig. I det h\u00e4r inl\u00e4gget fokuserar jag p\u00e5 anv\u00e4ndbarhet i Gutenberg editor och hur man h\u00e4mtar dem i Javascript.<\/p>\n

Vad vi ska g\u00f6ra och vad vi beh\u00f6ver<\/h2>\n

Anv\u00e4ndbarheten f\u00f6r att beg\u00e4ra anpassad information har ett brett utbud av anv\u00e4ndningsfall, s\u00e5 du beh\u00f6ver vanligtvis anpassa kodexemplen nedan f\u00f6r att passa dina behov. Data kan vara en anpassad post-fr\u00e5ga, en anpassad SQL-fr\u00e5ga eller n\u00e5got helt annat.<\/p>\n

N\u00e4r vi skapar en anpassad slutpunkt har vi full kontroll \u00f6ver dess retur. Vi kan utf\u00f6ra alla typer av operationer och fr\u00e5gor i WordPress\/PHP och skicka detta vidare som JSON. Och i v\u00e5rt Gutenberg-block kommer vi att kunna h\u00e4mta denna retur och g\u00f6ra vad vi vill med den inom blockets edit<\/code>funktion. Vanligtvis skulle du anv\u00e4nda data f\u00f6r att ge slutanv\u00e4ndaren ett val eller information i blockredigeraren, men du kan ocks\u00e5 lagra information fr\u00e5n den i ditt block f\u00f6r vidare anv\u00e4ndning. Du kan ocks\u00e5 skapa dina egna anpassade butiker f\u00f6r denna data, men jag g\u00e5r inte in p\u00e5 hur man g\u00f6r det.<\/p>\n

Jag antar att du redan \u00e4r bekant med hur man skapar anpassade Gutenberg-block s\u00e5 jag kommer inte att g\u00e5 igenom detta i detalj h\u00e4r.<\/p>\n

Skapa en REST API-slutpunkt<\/h2>\n

Registrering av en anpassad REST API-slutpunkt g\u00f6rs i PHP. Du skulle l\u00e4gga till den h\u00e4r koden i ditt teman functions.php<\/code>eller en aktiv plugin-kod. Koppla en funktion till \u00e5tg\u00e4rden rest_api_init<\/code>och k\u00f6r funktionen [register_rest_route](https:\/\/developer.wordpress.org\/reference\/functions\/register_rest_route\/)()<\/code>f\u00f6r varje slutpunkt du vill registrera.<\/p>\n

Ange ditt namnomr\u00e5de som f\u00f6rsta parameter, din slutpunktsrutt som andra och en rad inst\u00e4llningar som tredje parameter till register_rest_route()<\/code>. Den fj\u00e4rde parametern styr om du vill \u00e5sidos\u00e4tta en befintlig rutt eller inte; inte n\u00e5got vi ska titta p\u00e5 h\u00e4r. I arrayen f\u00f6r den tredje parametern b\u00f6r du som minimum st\u00e4lla in egenskapen ’ callback<\/code>’ till en funktion som \u00e4r ansvarig f\u00f6r att returnera slutpunktens data. Att st\u00e4lla in ’ method<\/code>’ \u00e4r ocks\u00e5 vanligt, t.ex. att st\u00e4lla in din slutpunkt p\u00e5 ’ GET<\/code>’, ’ POST<\/code>’, ’ PUT<\/code>’ osv.<\/p>\n

L\u00e5t oss b\u00f6rja med att registrera en enkel slutpunkt;<\/p>\n

add_action('rest_api_init', function() {\n    register_rest_route('awhitepixel\/v1', '\/mydata', [\n        'method' => 'GET',\n        'callback' => 'awhitepixel_rest_route_mydata'\n    ]);\n});<\/code><\/pre>\n
Mitt temas namnomr\u00e5de \u00e4r ’ awhitepixel\/v1<\/code>’ och jag registrerar en slutpunkt ’ mydata<\/code>’ inom detta namnomr\u00e5de. Det betyder att jag kan komma \u00e5t mitt anpassade REST API p\u00e5 http:\/\/localhost\/wordpress\/wp-json\/awhitepixel\/v1\/mydata<\/code>.<\/p>\n
N\u00e4r du registrerar (eller \u00e4ndrar) REST API-rutter m\u00e5ste du spola dina permal\u00e4nkar<\/strong> f\u00f6r att det ska fungera. Du kan g\u00f6ra detta genom att g\u00e5 till Inst\u00e4llningar > Permal\u00e4nkar och helt enkelt klicka p\u00e5 Spara.<\/p>\n
Ovanst\u00e5ende kod fungerar inte \u00e4n, eftersom jag inte har definierat funktionsupps\u00e4ttningen som callback: awhitepixel_rest_route_mydata<\/code>. \u00c5teruppringningsfunktionen tar emot en parameter; en rad data med information och argument som skickas in fr\u00e5n beg\u00e4ran. Slutligen m\u00e5ste du noga \u00f6verv\u00e4ga \u00e5teruppringningsfunktionens \u00e5terkomst.<\/p>\n
F\u00f6r det f\u00f6rsta m\u00e5ste du alltid returnera n\u00e5got fr\u00e5n din slutpunktsuppringning. Alla returer kommer automatiskt att konverteras till JSON av WordPress. Det betyder att du kan returnera praktiskt taget alla former av data i din funktion; en str\u00e4ng, null, en array eller [WP_Error](https:\/\/developer.wordpress.org\/reference\/classes\/wp_error\/)<\/code>instans. Du kan ocks\u00e5 v\u00e4lja att returnera ett [WP_REST_Response](https:\/\/developer.wordpress.org\/reference\/classes\/wp_rest_response\/)<\/code>objekt f\u00f6r mer kontroll p\u00e5 t.ex. statuskod eller rubrikinformation. Jag rekommenderar att du lindar returen i funktionen [rest_ensure_response](https:\/\/developer.wordpress.org\/reference\/functions\/rest_ensure_response\/)()<\/code>f\u00f6r att s\u00e4kerst\u00e4lla att ditt svar \u00e4r ett giltigt REST-svar.<\/p>\n
L\u00e5t oss definiera v\u00e5r callback-funktion och returnera en enkel str\u00e4ng som en b\u00f6rjan;<\/p>\n
function awhitepixel_rest_route_mydata($data) {\n    $response = 'Hello there!';\n    return rest_ensure_response($response);\n}<\/code><\/pre>\n
Med ovanst\u00e5ende kod (och t\u00f6mda permal\u00e4nkar) kan jag nu g\u00e5 till URL:en http:\/\/localhost\/wordpress\/wp-json\/awhitepixel\/v1\/mydata<\/code>.<\/p>\n
\"Skapa<\/a><\/p>\n
H\u00e4rifr\u00e5n kan vi l\u00e4gga till vilken typ av kod som helst i v\u00e5r \u00e5teruppringningsfunktion f\u00f6r att generera korrekt data att returnera. Du kan fr\u00e5ga WordPress-inneh\u00e5ll med t.ex. [WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)<\/code>g\u00f6ra fr\u00e5gor i databasen eller beg\u00e4ra extern data. Den h\u00e4r delen \u00e4r upp till dig.<\/p>\n
L\u00e5t oss nu g\u00e5 vidare till den motsatta sidan; hur man g\u00f6r f\u00f6rfr\u00e5gningarna.<\/p>\n
G\u00f6r REST API-f\u00f6rfr\u00e5gningar i Javascript<\/h2>\n
Att utf\u00f6ra REST-beg\u00e4ran g\u00f6rs vanligtvis med hj\u00e4lp [fetch](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API)<\/code>av Javascript. WordPress tillhandah\u00e5ller sitt eget omslag fetch<\/code>som f\u00f6renklar WordPress REST API-f\u00f6rfr\u00e5gningar; [wp.apiFetch](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-api-fetch\/)<\/code>. Detta \u00e4r vad jag kommer att anv\u00e4nda i mitt anpassade Gutenberg-block. T\u00e4nk p\u00e5 att en fetch<\/code>beg\u00e4ran returnerar ett "l\u00f6fte" – s\u00e5 vi m\u00e5ste kedja ett .then()<\/code>f\u00f6r att kunna hantera den faktiska f\u00f6rfr\u00e5gningsreturen. Basanv\u00e4ndningen \u00e4r ungef\u00e4r s\u00e5 h\u00e4r;<\/p>\n
wp.apiFetch({\n    path: '<namespace and endpoint>',\n}).then(data => {\n    console.log('response from apifetch: ', data);\n});<\/code><\/pre>\n
apiFetch<\/code>till\u00e5ter oss att tillhandah\u00e5lla en path<\/code>egenskap ist\u00e4llet f\u00f6r att bygga hela webbadressen. Allt vi beh\u00f6ver tillhandah\u00e5lla \u00e4r namnutrymmet och slutpunkten, och apiFetch<\/code>kommer att l\u00e4gga till detta till WordPress REST API rot-URL. Inuti .then()<\/code>funktionen har vi tillg\u00e5ng till data som redan \u00e4r konverterad till JSON. Det \u00e4r h\u00e4r du skulle g\u00f6ra n\u00e5got med datan. Vanligtvis lagrar du returnerad data i t.ex. komponentens tillst\u00e5nd.<\/p>\n
Nedan \u00e4r ett exempel p\u00e5 ett anpassat Gutenberg-blocks edit<\/code>komponent. Den \u00e4r klassbaserad f\u00f6r att kunna anv\u00e4ndas state<\/code>f\u00f6r att lagra returnerad data fr\u00e5n REST API-beg\u00e4ran. Detta g\u00f6r att vi ocks\u00e5 kan k\u00f6ra f\u00f6rfr\u00e5gan componentDidMount()<\/code>n\u00e4r den f\u00f6rst monteras (se Reacts dokumentation om livscykelmetoder<\/a> ). Allt detta ger ett enkelt exempel f\u00f6r att du ska f\u00f6rst\u00e5 det grundl\u00e4ggande konceptet; inte som ett recept f\u00f6r att g\u00f6ra det exakt s\u00e5 h\u00e4r. Du kan \u00f6verv\u00e4ga att anv\u00e4nda React-krokar och funktionella komponenter<\/a> eller konstruera en komponent av h\u00f6gre ordning<\/a> ist\u00e4llet.<\/p>\n
const { Component } = wp.element;\nconst { Spinner } = wp.components;\n\u00a0\nclass BlockEdit extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            list: [],\n            loading: true\n        }\n    }\n\u00a0\n    componentDidMount() {\n        this.runApiFetch();\n    }\n\u00a0\n    runApiFetch() {\n        wp.apiFetch({\n            path: 'awhitepixel\/v1\/mydata',\n        }).then(data => {\n            this.setState({\n                list: data,\n                loading: false\n            });\n        });\n    }\n\u00a0\n    render() {\n        return(\n            <div>\n                {this.state.loading? (<Spinner \/>\n                ): (<p>Data is ready!<\/p>\n                )}\n            <\/div>\n        );\n\u00a0\n    }\n}\nexport default BlockEdit;<\/code><\/pre>\n
Exemplet ovan \u00e4r en klassbaserad komponent som levereras till blockets edit<\/code>funktion i registerBlockType()<\/code>. Den st\u00e4ller in ett tillst\u00e5ndsobjekt f\u00f6r en array f\u00f6r att h\u00e5lla data (detta beror s\u00e5 klart p\u00e5 vilken data du returnerar) och en status boolean f\u00f6r att veta n\u00e4r asynkbeg\u00e4ran har returnerats. N\u00e4r komponenten \u00e4r monterad (renderad f\u00f6r f\u00f6rsta g\u00e5ngen) k\u00f6r den funktionen f\u00f6r att utf\u00f6ra apiFetch<\/code>beg\u00e4ran. Vi anger s\u00f6kv\u00e4gen till slutpunkten vi registrerade i PHP ovan. Metoden \u00e4r som standard GET s\u00e5 vi beh\u00f6ver inte specificera detta i apiFetch<\/code>. Och innefunktion .then()<\/code>n\u00e4r f\u00f6rfr\u00e5gan \u00e4r klar uppdaterar vi komponentens tillst\u00e5nd med returnerad data.<\/p>\n
Uppenbarligen skulle ditt blocks renderingsfunktion g\u00f6ra mer med den returnerade datan i sig. Du kanske vill tillhandah\u00e5lla data till anv\u00e4ndaren som p\u00e5 n\u00e5got s\u00e4tt presenterar en lista att kanske v\u00e4lja mellan. Allt beror p\u00e5 vilken typ av data det \u00e4r och vad du vill anv\u00e4nda den till.<\/p>\n
\u00d6verf\u00f6r argument till slutpunkten<\/h2>\n
I vissa fall m\u00e5ste vi f\u00f6ra n\u00e5gra argument till slutpunkten. Vanliga anv\u00e4ndningsomr\u00e5den \u00e4r att skicka ett ID efter endpoint; skulle till exempel http:\/\/localhost\/wordpress\/wp-json\/wp\/v2\/posts\/14<\/code>returnera post-ID 14.<\/p>\n
Detta \u00e4r ganska enkelt och g\u00f6rs genom att l\u00e4gga till ett regex-s\u00f6km\u00f6nster till slutpunkten n\u00e4r du registrerar det. Det kr\u00e4ver viss kunskap om regexes f\u00f6r att bygga komplexa m\u00f6nster, men nedan \u00e4r ett exempel som matchar ett nummer och tilldelar det namnet ’id’. Att namnge matchningarna ger oss m\u00f6jlighet att komma \u00e5t variabeln i v\u00e5r callback-funktion. L\u00e5t mig visa dig vad jag menar.<\/p>\n
L\u00e5t oss registrera en ny slutpunktsrutt. Vi anv\u00e4nder samma slutpunkt som vi gjorde tidigare (’ awhitepixel\/v1\/mydata<\/code>’) men f\u00f6r denna rutt l\u00e4gger vi till en regexmatchning f\u00f6r ett nummer i slutet.<\/p>\n
add_action('rest_api_init', function() {\n    register_rest_route('awhitepixel\/v1', '\/mydata', [\n        'method' => 'GET',\n        'callback' => 'awhitepixel_rest_route_mydata'\n    ]);\n\u00a0\n    register_rest_route('awhitepixel\/v1', '\/mydata\/(?P<id>[d]+)', [\n        'method' => 'GET',\n        'callback' => 'awhitepixel_rest_route_mydata'\n    ]);\n});<\/code><\/pre>\n
Regex-m\u00f6nstret (?P<id>[d]+)<\/code>verkar kryptiskt, men kommer att vara ganska tydligt med en viss grundl\u00e4ggande f\u00f6rst\u00e5else f\u00f6r regex. Delen [d]+<\/code>matchar valfritt nummer (0-9) 1 eller flera g\u00e5nger. Delarna (?P<id><\/code>och )<\/code>\u00e4r f\u00f6r att matcha en namngiven grupp. Gruppnamnet \u00e4r i det h\u00e4r fallet id<\/code>, men du kan namnge dina grupper vad du vill.<\/p>\n
Du kan v\u00e4lja att styra denna slutpunkt till en separat \u00e5teruppringningsfunktion, men jag har valt att anv\u00e4nda samma funktion f\u00f6r att hantera b\u00e5de \/mydata<\/code>och \/mydata\/<ID><\/code>f\u00f6rfr\u00e5gningar. Det betyder att jag i min \u00e5teruppringningsfunktion kan g\u00f6ra:<\/p>\n
function awhitepixel_rest_route_mydata($data) {\n    if ($data['id']) {\n        $response = 'Create return for ID: '. $data['id'];\n    } else {\n        $response = 'Create general return (no ID provided)';\n    }\n    return rest_ensure_response($response);\n}<\/code><\/pre>\n
Kom ih\u00e5g att parametern till callback-funktionen inneh\u00e5ller de returnerade argumenten. Eftersom jag d\u00f6pte min matchade grupp till ’ id<\/code>’ kommer det matchade v\u00e4rdet att vara tillg\u00e4ngligt i $data['id']<\/code>. Och slutligen eftersom jag anv\u00e4nder samma funktion f\u00f6r att hantera f\u00f6rfr\u00e5gningar med och utan ID kan jag enkelt v\u00e4xla mellan de tv\u00e5 olika returerna.<\/p>\n
Med detta (och uppdaterade permal\u00e4nkar) kommer jag att f\u00e5 dessa svar f\u00f6r mina anpassade slutpunkter:<\/p>\n
\"Skapa<\/a>\"Skapa<\/a><\/p>\n
Inspelningsk\u00e4lla:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
En guide i hur du skapar anpassade WordPress REST API-slutpunkter och utf\u00f6r apiFetch-f\u00f6rfr\u00e5gningar f\u00f6r dem i ett anpassat Gutenberg-block.<\/p>\n","protected":false},"author":1,"featured_media":224922,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[901,838,942,942,848,901,922,1110,922,818,818,838,848,868,868],"tags":[1173],"class_list":{"0":"post-233918","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-koda","8":"category-guide-foer-nyboerjare","9":"category-gutenberg-9","11":"category-handledningar","13":"category-oevrig","14":"category-n-a","16":"category-plugins-3","20":"category-wordpress-9","22":"tag-affiai-sv"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233918","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=233918"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233918\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/224922"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}