mirror of
https://github.com/strapi/strapi.git
synced 2025-12-27 15:13:21 +00:00
Integration documentation (#7282)
* Cleanup shelljs Signed-off-by: Alexandre Bodin <bodin.alex@gmail.com> * Bump koa-session from 5.13.1 to 6.0.0 (#7254) Bumps [koa-session](https://github.com/koajs/session) from 5.13.1 to 6.0.0. - [Release notes](https://github.com/koajs/session/releases) - [Changelog](https://github.com/koajs/session/blob/master/History.md) - [Commits](https://github.com/koajs/session/compare/5.13.1...6.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Fix #7252: fix relation name fix regression issue due to pull #7204 Signed-off-by: Akash P <aksdevac@gmail.com> * v3.1.3 * Add React Integration * Remove character * Created a new component for less code * Review modifications * Review modifications 2 * Add Vue.js, Next.js, Nuxt.js, Gatsby and GraphQL inte * Change Select with Checkboxes * Remove useless fonction in Next.js * Update Next.js * Update Next.js 2 * Update Vue.js and Nuxt.js * Update React and Next.js * Update Post example * Update all * Last reviews Co-authored-by: Alexandre Bodin <bodin.alex@gmail.com> Co-authored-by: Alexandre BODIN <alexandrebodin@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Akash P <aksdevac@gmail.com>
This commit is contained in:
Maxime Castres
GitHub
parent
009522d078
commit
28f1d6df86
@ -168,7 +168,11 @@ module.exports = {
|
||||
{
|
||||
collapsable: true,
|
||||
title: '📄 Content API',
|
||||
children: ['/v3.x/content-api/api-endpoints', '/v3.x/content-api/parameters'],
|
||||
children: [
|
||||
['/v3.x/content-api/api-endpoints', 'API Endpoints'],
|
||||
['/v3.x/content-api/parameters', 'Parameters'],
|
||||
['/v3.x/content-api/integrations', 'Integrations']
|
||||
],
|
||||
},
|
||||
{
|
||||
collapsable: true,
|
||||
|
||||
177
docs/.vuepress/theme/global-components/IntegrationLinks.vue
Normal file
177
docs/.vuepress/theme/global-components/IntegrationLinks.vue
Normal file
@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- React -->
|
||||
<div>
|
||||
<InstallLink link="../getting-started/react.html">
|
||||
<template #icon>
|
||||
<svg width="2500" height="2246" viewBox="0 0 256 230" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M.754 114.75c0 19.215 18.763 37.152 48.343 47.263-5.907 29.737-1.058 53.706 15.136 63.045 16.645 9.6 41.443 2.955 64.98-17.62 22.943 19.744 46.13 27.514 62.31 18.148 16.63-9.627 21.687-35.221 15.617-65.887 30.81-10.186 48.044-25.481 48.044-44.949 0-18.769-18.797-35.006-47.979-45.052 6.535-31.933.998-55.32-15.867-65.045-16.259-9.376-39.716-1.204-62.996 19.056C104.122 2.205 80.897-4.36 64.05 5.392 47.806 14.795 43.171 39.2 49.097 69.487 20.515 79.452.754 96.057.754 114.75z" fill="#FFF"></path><path d="M201.025 79.674a151.364 151.364 0 0 0-7.274-2.292 137.5 137.5 0 0 0 1.124-4.961c5.506-26.728 1.906-48.26-10.388-55.348-11.787-6.798-31.065.29-50.535 17.233a151.136 151.136 0 0 0-5.626 5.163 137.573 137.573 0 0 0-3.744-3.458c-20.405-18.118-40.858-25.752-53.139-18.643-11.776 6.817-15.264 27.06-10.307 52.39a150.91 150.91 0 0 0 1.67 7.484c-2.894.822-5.689 1.698-8.363 2.63-23.922 8.34-39.2 21.412-39.2 34.97 0 14.004 16.4 28.05 41.318 36.566a128.44 128.44 0 0 0 6.11 1.91 147.813 147.813 0 0 0-1.775 8.067c-4.726 24.89-1.035 44.653 10.71 51.428 12.131 6.995 32.491-.195 52.317-17.525 1.567-1.37 3.14-2.823 4.715-4.346a148.34 148.34 0 0 0 6.108 5.573c19.204 16.525 38.17 23.198 49.905 16.405 12.12-7.016 16.058-28.247 10.944-54.078-.39-1.973-.845-3.988-1.355-6.04 1.43-.422 2.833-.858 4.202-1.312 25.904-8.582 42.757-22.457 42.757-36.648 0-13.607-15.77-26.767-40.174-35.168z" fill="#53C1DE"></path><path d="M195.406 142.328c-1.235.409-2.503.804-3.795 1.187-2.86-9.053-6.72-18.68-11.442-28.625 4.507-9.71 8.217-19.213 10.997-28.208 2.311.67 4.555 1.375 6.717 2.12 20.91 7.197 33.664 17.84 33.664 26.04 0 8.735-13.775 20.075-36.14 27.486zm-9.28 18.389c2.261 11.422 2.584 21.749 1.086 29.822-1.346 7.254-4.052 12.09-7.398 14.027-7.121 4.122-22.35-1.236-38.772-15.368-1.883-1.62-3.78-3.35-5.682-5.18 6.367-6.964 12.73-15.06 18.94-24.05 10.924-.969 21.244-2.554 30.603-4.717.46 1.86.87 3.683 1.223 5.466zm-93.85 43.137c-6.957 2.457-12.498 2.527-15.847.596-7.128-4.11-10.09-19.98-6.049-41.265a138.507 138.507 0 0 1 1.65-7.502c9.255 2.047 19.5 3.52 30.45 4.408 6.251 8.797 12.798 16.883 19.396 23.964a118.863 118.863 0 0 1-4.305 3.964c-8.767 7.664-17.552 13.1-25.294 15.835zm-32.593-61.58c-11.018-3.766-20.117-8.66-26.354-14-5.604-4.8-8.434-9.565-8.434-13.432 0-8.227 12.267-18.722 32.726-25.855a139.276 139.276 0 0 1 7.777-2.447c2.828 9.197 6.537 18.813 11.013 28.537-4.534 9.869-8.296 19.638-11.15 28.943a118.908 118.908 0 0 1-5.578-1.746zm10.926-74.37c-4.247-21.703-1.427-38.074 5.67-42.182 7.56-4.376 24.275 1.864 41.893 17.507 1.126 1 2.257 2.047 3.39 3.13-6.564 7.049-13.051 15.074-19.248 23.82-10.627.985-20.8 2.567-30.152 4.686a141.525 141.525 0 0 1-1.553-6.962zm97.467 24.067a306.982 306.982 0 0 0-6.871-11.3c7.21.91 14.117 2.12 20.603 3.601-1.947 6.241-4.374 12.767-7.232 19.457a336.42 336.42 0 0 0-6.5-11.758zm-39.747-38.714c4.452 4.823 8.911 10.209 13.297 16.052a284.245 284.245 0 0 0-26.706-.006c4.39-5.789 8.887-11.167 13.409-16.046zm-40.002 38.78a285.24 285.24 0 0 0-6.378 11.685c-2.811-6.667-5.216-13.222-7.18-19.552 6.447-1.443 13.322-2.622 20.485-3.517a283.79 283.79 0 0 0-6.927 11.384zm7.133 57.683c-7.4-.826-14.379-1.945-20.824-3.348 1.995-6.442 4.453-13.138 7.324-19.948a283.494 283.494 0 0 0 6.406 11.692 285.27 285.27 0 0 0 7.094 11.604zm33.136 27.389c-4.575-4.937-9.138-10.397-13.595-16.27 4.326.17 8.737.256 13.22.256 4.606 0 9.159-.103 13.64-.303-4.4 5.98-8.843 11.448-13.265 16.317zm46.072-51.032c3.02 6.884 5.566 13.544 7.588 19.877-6.552 1.495-13.625 2.699-21.078 3.593a337.537 337.537 0 0 0 6.937-11.498 306.632 306.632 0 0 0 6.553-11.972zm-14.915 7.15a316.478 316.478 0 0 1-10.84 17.49c-6.704.479-13.632.726-20.692.726-7.031 0-13.871-.219-20.458-.646A273.798 273.798 0 0 1 96.72 133.28a271.334 271.334 0 0 1-9.64-18.206 273.864 273.864 0 0 1 9.611-18.216v.002a271.252 271.252 0 0 1 10.956-17.442c6.72-.508 13.61-.774 20.575-.774 6.996 0 13.895.268 20.613.78a290.704 290.704 0 0 1 10.887 17.383 316.418 316.418 0 0 1 9.741 18.13 290.806 290.806 0 0 1-9.709 18.29zm19.913-107.792c7.566 4.364 10.509 21.961 5.755 45.038a127.525 127.525 0 0 1-1.016 4.492c-9.374-2.163-19.554-3.773-30.212-4.773-6.209-8.841-12.642-16.88-19.1-23.838a141.92 141.92 0 0 1 5.196-4.766c16.682-14.518 32.273-20.25 39.377-16.153z" fill="#FFF"></path><path d="M128.221 94.665c11.144 0 20.177 9.034 20.177 20.177 0 11.144-9.033 20.178-20.177 20.178-11.143 0-20.177-9.034-20.177-20.178 0-11.143 9.034-20.177 20.177-20.177" fill="#53C1DE"></path></svg>
|
||||
</template>
|
||||
<template #title>React</template>
|
||||
<template #description>
|
||||
Consume your API with React
|
||||
</template>
|
||||
</InstallLink>
|
||||
</div>
|
||||
|
||||
<!-- Vue -->
|
||||
<div>
|
||||
<InstallLink link="../getting-started/vue-js.html">
|
||||
<template #icon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 261.76 226.69"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>
|
||||
</template>
|
||||
<template #title>Vue.js</template>
|
||||
<template #description>
|
||||
Consume your API with Vue.js
|
||||
</template>
|
||||
</InstallLink>
|
||||
</div>
|
||||
|
||||
<!-- Next.js -->
|
||||
<div>
|
||||
<InstallLink link="../getting-started/next-js.html">
|
||||
<template #icon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="207px" height="124px" viewBox="0 0 207 124" version="1.1">
|
||||
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>next-black</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs/>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Black-Next.js" transform="translate(-247.000000, -138.000000)" fill="#000000" fill-rule="nonzero">
|
||||
<g id="next-black" transform="translate(247.000000, 138.000000)">
|
||||
<g id="EXT-+-Type-something">
|
||||
<path d="M48.9421964,32.6320058 L87.9011585,32.6320058 L87.9011585,35.7136421 L52.5134345,35.7136421 L52.5134345,58.9070103 L85.7908813,58.9070103 L85.7908813,61.9886466 L52.5134345,61.9886466 L52.5134345,87.4526941 L88.306981,87.4526941 L88.306981,90.5343303 L48.9421964,90.5343303 L48.9421964,32.6320058 Z M91.3912326,32.6320058 L95.5306221,32.6320058 L113.8738,58.0960534 L132.622801,32.6320058 L158.124498,0.286809811 L116.22757,60.7722112 L137.817329,90.5343303 L133.51561,90.5343303 L113.8738,63.4483691 L94.1508254,90.5343303 L89.9302715,90.5343303 L111.682358,60.7722112 L91.3912326,32.6320058 Z M139.359455,35.713642 L139.359455,32.6320058 L183.756439,32.6320058 L183.756439,35.7136421 L163.302983,35.7136421 L163.302983,90.5343303 L159.731745,90.5343303 L159.731745,35.7136421 L139.359455,35.713642 Z" id="EXT"/>
|
||||
<polygon id="Type-something" points="0.202923647 32.6320058 4.66697141 32.6320058 66.2235778 124.303087 40.785176 90.5343303 3.93649086 37.0111732 3.77416185 90.5343303 0.202923647 90.5343303"/>
|
||||
</g>
|
||||
<path d="M183.396622,86.5227221 C184.134938,86.5227221 184.673474,85.9601075 184.673474,85.233037 C184.673474,84.5059658 184.134938,83.9433513 183.396622,83.9433513 C182.666993,83.9433513 182.11977,84.5059658 182.11977,85.233037 C182.11977,85.9601075 182.666993,86.5227221 183.396622,86.5227221 Z M186.905793,83.1297235 C186.905793,85.2763149 188.460599,86.678523 190.727662,86.678523 C193.142388,86.678523 194.601647,85.233037 194.601647,82.7229099 L194.601647,73.8855335 L192.655968,73.8855335 L192.655968,82.7142542 C192.655968,84.1078073 191.952397,84.8521899 190.710289,84.8521899 C189.598473,84.8521899 188.842785,84.1597409 188.816727,83.1297235 L186.905793,83.1297235 Z M197.146664,83.0172011 C197.285642,85.2503478 199.153145,86.678523 201.932686,86.678523 C204.903321,86.678523 206.762139,85.1811034 206.762139,82.792155 C206.762139,80.9138876 205.702439,79.8752151 203.131364,79.2779777 L201.750279,78.9404092 C200.117298,78.5595622 199.457158,78.0488813 199.457158,77.1573541 C199.457158,76.0321243 200.482113,75.296398 202.019547,75.296398 C203.478806,75.296398 204.48639,76.0148135 204.668797,77.1660091 L206.562359,77.1660091 C206.44944,75.0626962 204.590622,73.5825873 202.045605,73.5825873 C199.309495,73.5825873 197.48542,75.0626962 197.48542,77.2871878 C197.48542,79.1221767 198.519063,80.2127835 200.786126,80.7407758 L202.401734,81.1302779 C204.060773,81.5197807 204.790402,82.091051 204.790402,83.0431676 C204.790402,84.1510859 203.643842,84.9560573 202.08035,84.9560573 C200.403939,84.9560573 199.240006,84.2030196 199.074971,83.0172011 L197.146664,83.0172011 Z" id=".JS"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
<template #title>Next.js</template>
|
||||
<template #description>
|
||||
Consume your API with Next.js
|
||||
</template>
|
||||
</InstallLink>
|
||||
</div>
|
||||
|
||||
<!-- Nuxt.js -->
|
||||
<div>
|
||||
<InstallLink link="../getting-started/nuxt-js.html">
|
||||
<template #icon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 298">
|
||||
<g fill-rule="nonzero" fill="none">
|
||||
<path d="M227.92099 82.07407l-13.6889 23.7037-46.8148-81.08641L23.7037 273.58025h97.3037c0 13.0912 10.61252 23.7037 23.70371 23.7037H23.70371c-8.46771 0-16.29145-4.52017-20.5246-11.85382-4.23315-7.33366-4.23272-16.36849.00114-23.70174L146.89383 12.83951c4.23415-7.33433 12.0596-11.85252 20.5284-11.85252 8.46878 0 16.29423 4.51819 20.52839 11.85252l39.97037 69.23456z" fill="#00C58E"/>
|
||||
<path d="M331.6642 261.7284l-90.05432-155.95062-13.6889-23.7037-13.68888 23.7037-90.04445 155.95061c-4.23385 7.33325-4.23428 16.36808-.00113 23.70174 4.23314 7.33365 12.05689 11.85382 20.5246 11.85382h166.4c8.46946 0 16.29644-4.51525 20.532-11.84955 4.23555-7.3343 4.23606-16.37123.00132-23.706h.01976zM144.7111 273.58024L227.921 129.48148l83.19012 144.09877h-166.4z" fill="#FFF"/>
|
||||
<path d="M396.04938 285.4321c-4.23344 7.33254-12.05656 11.85185-20.52345 11.85185H311.1111c13.0912 0 23.7037-10.6125 23.7037-23.7037h40.66173L260.09877 73.74815l-18.4889 32.02963-13.68888-23.7037L239.5753 61.8963c4.23416-7.33433 12.0596-11.85252 20.5284-11.85252 8.46879 0 16.29423 4.51819 20.52839 11.85252l115.41728 199.8321c4.23426 7.33395 4.23426 16.36975 0 23.7037z" fill="#108775"/>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
<template #title>Nuxt.js</template>
|
||||
<template #description>
|
||||
Consume your API with Nuxt.js
|
||||
</template>
|
||||
</InstallLink>
|
||||
</div>
|
||||
|
||||
<!-- Gatsby -->
|
||||
<div>
|
||||
<InstallLink link="../getting-started/gatsby.html">
|
||||
<template #icon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" focusable="false"><title>Gatsby</title><path fill="#663399" d="M14,0C6.268,0,0,6.268,0,14s6.268,14,14,14s14-6.268,14-14S21.732,0,14,0z M6.2,21.8 C4.1,19.7,3,16.9,3,14.2L13.9,25C11.1,24.9,8.3,23.9,6.2,21.8z M16.4,24.7L3.3,11.6C4.4,6.7,8.8,3,14,3c3.7,0,6.9,1.8,8.9,4.5 l-1.5,1.3C19.7,6.5,17,5,14,5c-3.9,0-7.2,2.5-8.5,6L17,22.5c2.9-1,5.1-3.5,5.8-6.5H18v-2h7C25,19.2,21.3,23.6,16.4,24.7z"></path><g id="innards" fill="white"><path d="M6.2,21.8C4.1,19.7,3,16.9,3,14.2L13.9,25C11.1,24.9,8.3,23.9,6.2,21.8z"></path><path d="M16.4,24.7L3.3,11.6C4.4,6.7,8.8,3,14,3c3.7,0,6.9,1.8,8.9,4.5l-1.5,1.3C19.7,6.5,17,5,14,5 c-3.9,0-7.2,2.5-8.5,6L17,22.5c2.9-1,5.1-3.5,5.8-6.5H18v-2h7C25,19.2,21.3,23.6,16.4,24.7z"></path></g></svg>
|
||||
</template>
|
||||
<template #title>Gatsby</template>
|
||||
<template #description>
|
||||
Consume your API with Gatsby
|
||||
</template>
|
||||
</InstallLink>
|
||||
</div>
|
||||
|
||||
<!-- GraphQL -->
|
||||
<div>
|
||||
<InstallLink link="../getting-started/graphql.html">
|
||||
<template #icon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="GraphQL_Logo" x="0px" y="0px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
|
||||
<rect x="122" y="-0.4" transform="matrix(-0.866 -0.5 0.5 -0.866 163.3196 363.3136)" fill="#E535AB" width="16.6" height="320.3"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<rect x="39.8" y="272.2" fill="#E535AB" width="320.3" height="16.6"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
|
||||
<rect x="37.9" y="312.2" transform="matrix(-0.866 -0.5 0.5 -0.866 83.0693 663.3409)" fill="#E535AB" width="185" height="16.6"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
|
||||
<rect x="177.1" y="71.1" transform="matrix(-0.866 -0.5 0.5 -0.866 463.3409 283.0693)" fill="#E535AB" width="185" height="16.6"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
|
||||
<rect x="122.1" y="-13" transform="matrix(-0.5 -0.866 0.866 -0.5 126.7903 232.1221)" fill="#E535AB" width="16.6" height="185"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
|
||||
<rect x="109.6" y="151.6" transform="matrix(-0.5 -0.866 0.866 -0.5 266.0828 473.3766)" fill="#E535AB" width="320.3" height="16.6"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<rect x="52.5" y="107.5" fill="#E535AB" width="16.6" height="185"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<rect x="330.9" y="107.5" fill="#E535AB" width="16.6" height="185"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
|
||||
<rect x="262.4" y="240.1" transform="matrix(-0.5 -0.866 0.866 -0.5 126.7953 714.2875)" fill="#E535AB" width="14.5" height="160.9"/>
|
||||
</g>
|
||||
</g>
|
||||
<path fill="#E535AB" d="M369.5,297.9c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8 C373.5,259.9,379.2,281.2,369.5,297.9"/>
|
||||
<path fill="#E535AB" d="M90.9,137c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8 C94.8,99,100.5,120.3,90.9,137"/>
|
||||
<path fill="#E535AB" d="M30.5,297.9c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7 C61.4,320.3,40.1,314.6,30.5,297.9"/>
|
||||
<path fill="#E535AB" d="M309.1,137c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7 C340.1,159.4,318.7,153.7,309.1,137"/>
|
||||
<path fill="#E535AB" d="M200,395.8c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9 C234.9,380.1,219.3,395.8,200,395.8"/>
|
||||
<path fill="#E535AB" d="M200,74c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9 C234.9,58.4,219.3,74,200,74"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</template>
|
||||
<template #title>GraphQL</template>
|
||||
<template #description>
|
||||
Get started with GraphQL
|
||||
</template>
|
||||
</InstallLink>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InstallLink from "./InstallLink.vue"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
InstallLink
|
||||
}
|
||||
}
|
||||
</script>
|
||||
22
docs/v3.x/content-api/integrations.md
Normal file
22
docs/v3.x/content-api/integrations.md
Normal file
@ -0,0 +1,22 @@
|
||||
# Integrations
|
||||
|
||||
Strapi generates an API for you to access your content. But how can you connect a React, Ruby, Gatsby application to it?
|
||||
It is important to know what is an API.
|
||||
|
||||
## What is an API?
|
||||
|
||||
API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other.
|
||||
In case you want to connect a React application with Strapi, we say that React is the client and Strapi the system. Indeed, React will communicate to Strapi, by making HTTP requests. Strapi will then give a response back to your client.
|
||||
|
||||
If your Strapi application contains restaurants and you want to list them in your React application, all you need to do is to make an HTTP request to Strapi which will take care to give you a response containing your restaurants.
|
||||
|
||||
The [API Endpoints](../content-api/api-endpoints.html#api-endpoints) documentation will give you all the keys in hand to interact with your Strapi API.
|
||||
|
||||
## Get started
|
||||
|
||||
Today, any programming language has an HTTP client allowing you to execute requests to an API and therefore interact with it. Javascript has [Axios](https://github.com/axios/axios), [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), Ruby has [Faraday](https://github.com/lostisland/faraday), [HTTParty](https://github.com/jnunemaker/httparty), Python has [Requests](https://requests.readthedocs.io/en/master/) etc...
|
||||
|
||||
Integrate Strapi with a multitude of frameworks, frontend or backend programming languages just below.
|
||||
|
||||
<IntegrationLinks>
|
||||
</IntegrationLinks>
|
||||
203
docs/v3.x/getting-started/gatsby.md
Normal file
203
docs/v3.x/getting-started/gatsby.md
Normal file
@ -0,0 +1,203 @@
|
||||
# Getting Started with Gatsby
|
||||
|
||||
This integration guide is following the [Getting started guide](../getting-started/quick-start.html). We assume that you have completed [Step 8](../getting-started/quick-start.html#_8-consume-the-content-type-s-api) and therefore can consume the API by browsing this [url](http://localhost:1337/restaurants).
|
||||
|
||||
If you haven't gone through the getting started guide, the way you request a Strapi API with [Gatsby](https://www.gatsbyjs.org/) remains the same except that you will not fetch the same content.
|
||||
|
||||
|
||||
### Create a Gatsby app
|
||||
|
||||
Create a basic Gatsby application using the [Gatsby CLI](https://www.gatsbyjs.org/docs/gatsby-cli/).
|
||||
|
||||
|
||||
```bash
|
||||
gatsby new gatsby-app
|
||||
```
|
||||
|
||||
### Configure Gatsby
|
||||
|
||||
Gatsby is a [Static Site Generator](https://www.staticgen.com/) and will fetch your content from Strapi at build time. You need to configure Gatsby to communicate with your Strapi application.
|
||||
|
||||
|
||||
```bash
|
||||
yarn add gatsby-source-strapi
|
||||
```
|
||||
|
||||
- Add the `gatsby-source-strapi` to the plugins section in the `gatsby-config.js` file:
|
||||
|
||||
```js
|
||||
{
|
||||
resolve: "gatsby-source-strapi",
|
||||
options: {
|
||||
apiURL: "http://localhost:1337",
|
||||
contentTypes: [
|
||||
"restaurant",
|
||||
"category",
|
||||
],
|
||||
queryLimit: 1000,
|
||||
},
|
||||
},
|
||||
```
|
||||
|
||||
### GET Request your collection type
|
||||
|
||||
Execute a GET request on the `restaurant` Collection Type in order to fetch all your restaurants.
|
||||
|
||||
Be sure that you activated the `find` permission for the `restaurant` Collection Type
|
||||
|
||||
|
||||
*Request*
|
||||
|
||||
```graphql
|
||||
query {
|
||||
allStrapiRestaurant {
|
||||
edges {
|
||||
node {
|
||||
strapiId
|
||||
name
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
*Response*
|
||||
|
||||
```json
|
||||
{
|
||||
"data": {
|
||||
"allStrapiRestaurant": {
|
||||
"edges": [
|
||||
{
|
||||
"node": {
|
||||
"strapiId": 1,
|
||||
"name": "Biscotte Restaurant",
|
||||
"description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers."
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example
|
||||
|
||||
`./src/pages/index.js`
|
||||
|
||||
```js
|
||||
import React from "react"
|
||||
|
||||
import { StaticQuery, graphql } from "gatsby"
|
||||
|
||||
const IndexPage = () => (
|
||||
<StaticQuery
|
||||
query={graphql`
|
||||
query {
|
||||
allStrapiRestaurant {
|
||||
edges {
|
||||
node {
|
||||
strapiId
|
||||
name
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`}
|
||||
render={data => (
|
||||
<ul>
|
||||
{ data.allStrapiRestaurant.edges.map(restaurant => <li key={restaurant.node.strapiId}>{restaurant.node.name}</li>) }
|
||||
</ul>
|
||||
)}
|
||||
/>
|
||||
)
|
||||
|
||||
export default IndexPage
|
||||
```
|
||||
|
||||
Execute a GET request on the `category` Collection Type in order to fetch a specific category with all the associated restaurants.
|
||||
|
||||
Be sure that you activated the `findOne` permission for the `category` Collection Type
|
||||
|
||||
*Request*
|
||||
|
||||
```graphql
|
||||
query {
|
||||
strapiCategory(strapiId: {eq: 1}) {
|
||||
strapiId
|
||||
name
|
||||
restaurants {
|
||||
name
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
*Response*
|
||||
|
||||
```json
|
||||
{
|
||||
"data": {
|
||||
"strapiCategory": {
|
||||
"id": "1",
|
||||
"name": "French Food",
|
||||
"restaurants": [
|
||||
{
|
||||
"name": "Biscotte Restaurant",
|
||||
"description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers."
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"extensions": {}
|
||||
}
|
||||
```
|
||||
|
||||
### Example
|
||||
|
||||
`./src/pages/index.js`
|
||||
|
||||
```js
|
||||
import React from "react"
|
||||
|
||||
import { StaticQuery, graphql } from "gatsby"
|
||||
|
||||
const IndexPage = () => (
|
||||
<StaticQuery
|
||||
query={graphql`
|
||||
query {
|
||||
strapiCategory(strapiId: {eq: 1}) {
|
||||
id
|
||||
name
|
||||
restaurants {
|
||||
id
|
||||
name
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
`}
|
||||
render={data => (
|
||||
<div>
|
||||
<h1>{ data.strapiCategory.name }</h1>
|
||||
<ul>
|
||||
{ data.strapiCategory.restaurants.map(restaurant => <li key={restaurant.id}>{restaurant.name}</li>) }
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
)
|
||||
|
||||
export default IndexPage
|
||||
|
||||
```
|
||||
|
||||
## Conclusion
|
||||
|
||||
Here is how to request your Collection Types in Strapi using Gatsby.
|
||||
|
||||
Learn more about [GraphQL](../plugins/graphql.html)
|
||||
302
docs/v3.x/getting-started/graphql.md
Normal file
302
docs/v3.x/getting-started/graphql.md
Normal file
@ -0,0 +1,302 @@
|
||||
# Getting Started with GraphQL
|
||||
|
||||
This integration guide is following the [Getting started guide](../getting-started/quick-start.html). We assume that you have completed [Step 8](../getting-started/quick-start.html#_8-consume-the-content-type-s-api) and therefore can consume the API by browsing this [url](http://localhost:1337/restaurants).
|
||||
|
||||
If you haven't gone through the getting started guide, the way you request a Strapi API with [GraphQL](https://graphql.org/) remains the same except that you will not fetch the same content.
|
||||
|
||||
### Install the GraphQL plugin
|
||||
|
||||
Install the graphql plugin in your Strapi project
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab yarn
|
||||
|
||||
```bash
|
||||
yarn strapi install graphql
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab npm
|
||||
|
||||
```bash
|
||||
npm run strapi install graphql
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab strapi
|
||||
|
||||
```bash
|
||||
strapi install graphql
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
### Fetch your Restaurant collection type
|
||||
|
||||
Play with the [GraphQL Playground](http://localhost:1337/graphql) to fetch your content
|
||||
|
||||
*Request*
|
||||
|
||||
```graphql
|
||||
query Restaurants {
|
||||
restaurants {
|
||||
id
|
||||
name
|
||||
description
|
||||
categories {
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
*Response*
|
||||
|
||||
```json
|
||||
{
|
||||
"data": {
|
||||
"restaurants": [
|
||||
{
|
||||
"id": "1",
|
||||
"name": "Biscotte Restaurant",
|
||||
"description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
|
||||
"categories": [
|
||||
{
|
||||
"name": "French Food"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Examples
|
||||
|
||||
These examples do not guide you to configure your client with Apollo for your [GraphQL endpoint](http://localhost:1337/graphql). Please follow the associated documentation for each client ([React](https://www.apollographql.com/docs/react/get-started/) and [Vue.js](https://apollo.vuejs.org/guide/installation.html#_1-apollo-client) here)
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab React
|
||||
|
||||
Using [React](../getting-started/react.html) and [Apollo](https://www.apollographql.com/)
|
||||
|
||||
```js
|
||||
import { gql, useQuery } from '@apollo/client';
|
||||
|
||||
function Restaurants() {
|
||||
const { loading, error, data } = useQuery(gql`
|
||||
query Restaurants {
|
||||
restaurants {
|
||||
id
|
||||
name
|
||||
description
|
||||
categories {
|
||||
name
|
||||
}
|
||||
}
|
||||
}`);
|
||||
|
||||
if (loading) return 'Loading...';
|
||||
if (error) return `Error! ${error.message}`;
|
||||
|
||||
return (
|
||||
<ul>
|
||||
{ data.restaurants.map(restaurant => <li key={restaurant.id}>{restaurant.name}</li>) }
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab Vue.js
|
||||
|
||||
Using [Vue.js](../getting-started/vue-js.html) and [Apollo](https://www.apollographql.com/)
|
||||
|
||||
```js
|
||||
<template>
|
||||
<div>
|
||||
<ul>
|
||||
<li v-for="restaurant in restaurants" :key="restaurant.id">
|
||||
{{ restaurant.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gql from "graphql-tag";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
restaurants: []
|
||||
};
|
||||
},
|
||||
apollo: {
|
||||
restaurants: gql`
|
||||
query Restaurants {
|
||||
restaurants {
|
||||
id
|
||||
name
|
||||
description
|
||||
categories {
|
||||
name
|
||||
}
|
||||
}
|
||||
}`
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
### Fetch your Category collection type
|
||||
|
||||
*Request*
|
||||
|
||||
```graphql
|
||||
query Category {
|
||||
category(id: 1) {
|
||||
id
|
||||
name
|
||||
restaurants {
|
||||
id
|
||||
name
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
*Response*
|
||||
|
||||
```json
|
||||
{
|
||||
"data": {
|
||||
"category": {
|
||||
"id": "1",
|
||||
"name": "French Food",
|
||||
"restaurants": [
|
||||
{
|
||||
"id": "1",
|
||||
"name": "Biscotte Restaurant",
|
||||
"description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers."
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Examples
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab React
|
||||
|
||||
Using [React](../getting-started/react.html) and [Apollo](https://www.apollographql.com/)
|
||||
|
||||
```js
|
||||
import { gql, useQuery } from '@apollo/client';
|
||||
|
||||
function Category({ id }) {
|
||||
const { loading, error, data } = useQuery(gql`
|
||||
query Category($id: ID!) {
|
||||
category(id: $id) {
|
||||
id
|
||||
name
|
||||
restaurants {
|
||||
id
|
||||
name
|
||||
description
|
||||
}
|
||||
}
|
||||
}`, { variables: { id } });
|
||||
|
||||
if (loading) return 'Loading...';
|
||||
if (error) return `Error! ${error.message}`;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>{ data.category.name }</h1>
|
||||
<ul>
|
||||
{ data.category.restaurants.map(restaurant => <li key={restaurant.id}>{restaurant.name}</li>) }
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab Vue.js
|
||||
|
||||
Using [Vue.js](../getting-started/vue-js.html) and [Apollo](https://www.apollographql.com/)
|
||||
|
||||
```js
|
||||
<template>
|
||||
<div>
|
||||
<h1>{{ category.name }}
|
||||
<ul>
|
||||
<li v-for="restaurant in category.restaurants" :key="restaurant.id">
|
||||
{{ restaurant.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gql from "graphql-tag";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
category: {},
|
||||
routeParam: this.$route.params.id
|
||||
};
|
||||
},
|
||||
apollo: {
|
||||
category: {
|
||||
query: gql`
|
||||
query Category($id: ID!) {
|
||||
category(id: $id) {
|
||||
id
|
||||
name
|
||||
restaurants {
|
||||
id
|
||||
name
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
variables() {
|
||||
return {
|
||||
id: this.routeParam
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
## Conclusion
|
||||
|
||||
This is how you request your Collection Types in Strapi using GraphQL.
|
||||
|
||||
Feel free to explore more about [GraphQL](../plugins/graphql.html)
|
||||
631
docs/v3.x/getting-started/next-js.md
Normal file
631
docs/v3.x/getting-started/next-js.md
Normal file
@ -0,0 +1,631 @@
|
||||
# Getting Started with Next.js
|
||||
|
||||
This integration guide is following the [Getting started guide](../getting-started/quick-start.html). We assume that you have completed [Step 8](../getting-started/quick-start.html#_8-consume-the-content-type-s-api) and therefore can consume the API by browsing this [url](http://localhost:1337/restaurants).
|
||||
|
||||
If you haven't gone through the getting started guide, the way you request a Strapi API with [Next.js](https://nextjs.org/) remains the same except that you will not fetch the same content.
|
||||
|
||||
|
||||
### Create a Next.js app
|
||||
|
||||
Create a basic Next.js application.
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab yarn
|
||||
|
||||
```bash
|
||||
yarn create next-app nextjs-app
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab npx
|
||||
|
||||
```bash
|
||||
npx create-next-app nextjs-app
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
### Use an HTTP client
|
||||
|
||||
Many HTTP clients are available but in this documentation we'll use [Axios](https://github.com/axios/axios) and [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
|
||||
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab axios
|
||||
|
||||
```bash
|
||||
yarn add axios
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
No installation needed
|
||||
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
### GET Request your collection type
|
||||
|
||||
Execute a GET request on the `restaurant` Collection Type in order to fetch all your restaurants.
|
||||
|
||||
Be sure that you activated the `find` permission for the `restaurant` Collection Type.
|
||||
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab axios
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
import axios from 'axios'
|
||||
|
||||
axios.get('http://localhost:1337/restaurants')
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
fetch("http://localhost:1337/restaurants", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
}).then(response => response.json())
|
||||
.then(data => console.log(data));
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
*Response*
|
||||
|
||||
```json
|
||||
[{
|
||||
"id": 1,
|
||||
"name": "Biscotte Restaurant",
|
||||
"description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
|
||||
"created_by": {
|
||||
"id": 1,
|
||||
"firstname": "Paul",
|
||||
"lastname": "Bocuse",
|
||||
"username": null
|
||||
},
|
||||
"updated_by": {
|
||||
"id": 1,
|
||||
"firstname": "Paul",
|
||||
"lastname": "Bocuse",
|
||||
"username": null
|
||||
},
|
||||
"created_at": "2020-07-31T11:37:16.964Z",
|
||||
"updated_at": "2020-07-31T11:37:16.975Z",
|
||||
"categories": [{
|
||||
"id": 2,
|
||||
"name": "French Food",
|
||||
"created_by": 1,
|
||||
"updated_by": 1,
|
||||
"created_at": "2020-07-31T11:36:23.164Z",
|
||||
"updated_at": "2020-07-31T11:36:23.172Z"
|
||||
}]
|
||||
}]
|
||||
```
|
||||
|
||||
::::
|
||||
|
||||
### Example
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab axios
|
||||
|
||||
`./pages/index.js`
|
||||
|
||||
```js
|
||||
import axios from 'axios'
|
||||
|
||||
const Home = ({ restaurants, error }) => {
|
||||
if (error) {
|
||||
return <div>An error occured: {error.message}</div>
|
||||
}
|
||||
return (
|
||||
<ul>
|
||||
{restaurants.map(restaurant => <li key={restaurant.id}>{restaurant.name}</li>)}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
Home.getInitialProps = async (ctx) => {
|
||||
try {
|
||||
const res = await axios.get('http://localhost:1337/restaurants')
|
||||
const restaurants = res.data
|
||||
return { restaurants }
|
||||
} catch (error) {
|
||||
return { error }
|
||||
}
|
||||
}
|
||||
|
||||
export default Home;
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
`./pages/index.js`
|
||||
|
||||
```js
|
||||
const Home = ({ restaurants, error }) => {
|
||||
if (error) {
|
||||
return <div>An error occured: {error.message}</div>;
|
||||
}
|
||||
return (
|
||||
<ul>
|
||||
{restaurants.map((restaurant) => (
|
||||
<li key={restaurant.id}>{restaurant.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
Home.getInitialProps = async (ctx) => {
|
||||
try {
|
||||
// Parses the JSON returned by a network request
|
||||
const parseJSON = (resp) => (resp.json ? resp.json() : resp);
|
||||
// Checks if a network request came back fine, and throws an error if not
|
||||
const checkStatus = (resp) => {
|
||||
if (resp.status >= 200 && resp.status < 300) {
|
||||
return resp;
|
||||
}
|
||||
|
||||
return parseJSON(resp).then((resp) => {
|
||||
throw resp;
|
||||
});
|
||||
};
|
||||
|
||||
const headers = {
|
||||
'Content-Type': 'application/json',
|
||||
};
|
||||
|
||||
const restaurants = await fetch('http://localhost:1337/restaurants', {
|
||||
method: 'GET',
|
||||
headers,
|
||||
})
|
||||
.then(checkStatus)
|
||||
.then(parseJSON);
|
||||
|
||||
return { restaurants };
|
||||
} catch (error) {
|
||||
return { error };
|
||||
}
|
||||
};
|
||||
|
||||
export default Home;
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
### POST Request your collection type
|
||||
|
||||
Execute a POST request on the `restaurant` Collection Type in order to create a restaurant.
|
||||
|
||||
Be sure that you activated the `create` permission for the `restaurant` Collection Type and the `find` permission for the `category` Collection type.
|
||||
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab axios
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
import axios from 'axios'
|
||||
|
||||
axios.post('http://localhost:1337/restaurants', {
|
||||
name: 'Dolemon Sushi',
|
||||
description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious',
|
||||
categories: [
|
||||
3
|
||||
]
|
||||
})
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
fetch('http://localhost:1337/restaurants', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: 'Dolemon Sushi',
|
||||
description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious',
|
||||
categories: [
|
||||
3
|
||||
]
|
||||
})
|
||||
}).then(response => response.json())
|
||||
.then(data => console.log(data));
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
*Response*
|
||||
|
||||
```json
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Dolemon Sushi",
|
||||
"description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
|
||||
"created_by": null,
|
||||
"updated_by": null,
|
||||
"created_at": "2020-08-04T09:57:11.669Z",
|
||||
"updated_at": "2020-08-04T09:57:11.669Z",
|
||||
"categories": [{
|
||||
"id": 3,
|
||||
"name": "Japanese",
|
||||
"created_by": 1,
|
||||
"updated_by": 1,
|
||||
"created_at": "2020-07-31T11:36:23.164Z",
|
||||
"updated_at": "2020-07-31T11:36:23.172Z"
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
::::
|
||||
|
||||
### Example
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab axios
|
||||
|
||||
`./pages/index.js`
|
||||
|
||||
```js
|
||||
import { useState } from 'react';
|
||||
import axios from 'axios';
|
||||
|
||||
const Home = ({ allCategories, errorCategories }) => {
|
||||
const [modifiedData, setModifiedData] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
categories: [],
|
||||
});
|
||||
const [errorRestaurants, setErrorRestaurants] = useState(null)
|
||||
|
||||
const handleChange = ({ target: { name, value } }) => {
|
||||
setModifiedData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
const response = await axios.post('http://localhost:1337/restaurants', modifiedData);
|
||||
console.log(response);
|
||||
} catch (error) {
|
||||
setErrorRestaurants(error)
|
||||
}
|
||||
};
|
||||
|
||||
const renderCheckbox = (category) => {
|
||||
const { categories } = modifiedData;
|
||||
const isChecked = categories.includes(category.id);
|
||||
const handleCheckboxChange = () => {
|
||||
if (!categories.includes(category.id)) {
|
||||
handleChange({ target: { name: 'categories', value: categories.concat(category.id) } });
|
||||
} else {
|
||||
handleChange({
|
||||
target: { name: 'categories', value: categories.filter((v) => v !== category.id) },
|
||||
});
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div key={category.id}>
|
||||
<label htmlFor={category.id}>{category.name}</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isChecked}
|
||||
onChange={handleCheckboxChange}
|
||||
name="categories"
|
||||
id={category.id}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
if (errorCategories) {
|
||||
return <div>An error occured (categories): {errorCategories.message}</div>;
|
||||
}
|
||||
if (errorRestaurants) {
|
||||
return <div>An error occured (restaurants): {errorRestaurants.message}</div>;
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<h3>Restaurants</h3>
|
||||
<br />
|
||||
<label>
|
||||
Name:
|
||||
<input type="text" name="name" value={modifiedData.name} onChange={handleChange} />
|
||||
</label>
|
||||
<label>
|
||||
Description:
|
||||
<input
|
||||
type="text"
|
||||
name="description"
|
||||
value={modifiedData.description}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</label>
|
||||
<div>
|
||||
<br />
|
||||
<b>Select categories</b>
|
||||
<br />
|
||||
{allCategories.map(renderCheckbox)}
|
||||
</div>
|
||||
<br />
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Home.getInitialProps = async (ctx) => {
|
||||
try {
|
||||
const res = await axios.get('http://localhost:1337/categories');
|
||||
const allCategories = res.data
|
||||
return { allCategories };
|
||||
} catch (errorCategories) {
|
||||
return { errorCategories };
|
||||
}
|
||||
};
|
||||
|
||||
export default Home;
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
`./pages/index.js`
|
||||
|
||||
```js
|
||||
import { useState } from 'react';
|
||||
|
||||
// Parses the JSON returned by a network request
|
||||
const parseJSON = (resp) => (resp.json ? resp.json() : resp);
|
||||
// Checks if a network request came back fine, and throws an error if not
|
||||
const checkStatus = (resp) => {
|
||||
if (resp.status >= 200 && resp.status < 300) {
|
||||
return resp;
|
||||
}
|
||||
return parseJSON(resp).then((resp) => {
|
||||
throw resp;
|
||||
});
|
||||
};
|
||||
const headers = {
|
||||
'Content-Type': 'application/json',
|
||||
};
|
||||
|
||||
const Home = ({ allCategories, errorCategories }) => {
|
||||
const [modifiedData, setModifiedData] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
categories: [],
|
||||
});
|
||||
const [errorRestaurants, setErrorRestaurants] = useState(null)
|
||||
|
||||
const handleChange = ({ target: { name, value } }) => {
|
||||
setModifiedData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
const response = await fetch('http://localhost:1337/restaurants', {
|
||||
method: 'POST',
|
||||
headers,
|
||||
body: JSON.stringify(modifiedData),
|
||||
})
|
||||
.then(checkStatus)
|
||||
.then(parseJSON);
|
||||
} catch (error) {
|
||||
setErrorRestaurants(error)
|
||||
}
|
||||
};
|
||||
|
||||
const renderCheckbox = (category) => {
|
||||
const { categories } = modifiedData;
|
||||
const isChecked = categories.includes(category.id);
|
||||
const handleCheckboxChange = () => {
|
||||
if (!categories.includes(category.id)) {
|
||||
handleChange({ target: { name: 'categories', value: categories.concat(category.id) } });
|
||||
} else {
|
||||
handleChange({
|
||||
target: { name: 'categories', value: categories.filter((v) => v !== category.id) },
|
||||
});
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div key={category.id}>
|
||||
<label htmlFor={category.id}>{category.name}</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isChecked}
|
||||
onChange={handleCheckboxChange}
|
||||
name="categories"
|
||||
id={category.id}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (errorCategories) {
|
||||
return <div>An error occured (categories): {errorCategories.message}</div>;
|
||||
}
|
||||
if (errorRestaurants) {
|
||||
return <div>An error occured (restaurants): {errorRestaurants.message}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<h3>Restaurants</h3>
|
||||
<br />
|
||||
<label>
|
||||
Name:
|
||||
<input type="text" name="name" value={modifiedData.name} onChange={handleChange} />
|
||||
</label>
|
||||
<label>
|
||||
Description:
|
||||
<input
|
||||
type="text"
|
||||
name="description"
|
||||
value={modifiedData.description}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</label>
|
||||
<div>
|
||||
<br />
|
||||
<b>Select categories</b>
|
||||
<br />
|
||||
{allCategories.map(renderCheckbox)}
|
||||
</div>
|
||||
<br />
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Home.getInitialProps = async (ctx) => {
|
||||
try {
|
||||
const allCategories = await fetch('http://localhost:1337/categories', { method: 'GET', headers })
|
||||
.then(checkStatus)
|
||||
.then(parseJSON);
|
||||
return { allCategories };
|
||||
} catch (errorCategories) {
|
||||
return { errorCategories };
|
||||
}
|
||||
};
|
||||
export default Home;
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
### PUT Request your collection type
|
||||
|
||||
Execute a PUT request on the `restaurant` Collection Type in order to update the category of a restaurant.
|
||||
|
||||
Be sure that you activated the `put` permission for the `restaurant` Collection Type.
|
||||
|
||||
:::: tabs
|
||||
|
||||
We consider that the id of your restaurant is `2`
|
||||
and the id of your category is `3`
|
||||
|
||||
::: tab axios
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
import axios from 'axios'
|
||||
|
||||
axios.put('http://localhost:1337/restaurants/2', {
|
||||
categories: [
|
||||
3
|
||||
]
|
||||
})
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
fetch('http://localhost:1337/restaurants/2', {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
categories: [
|
||||
3
|
||||
]
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
*Response*
|
||||
|
||||
```json
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Dolemon Sushi",
|
||||
"description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
|
||||
"created_by": null,
|
||||
"updated_by": null,
|
||||
"created_at": "2020-08-04T10:21:30.219Z",
|
||||
"updated_at": "2020-08-04T10:21:30.219Z",
|
||||
"categories": [{
|
||||
"id": 3,
|
||||
"name": "Japanese",
|
||||
"created_by": 1,
|
||||
"updated_by": 1,
|
||||
"created_at": "2020-08-04T10:24:26.901Z",
|
||||
"updated_at": "2020-08-04T10:24:26.911Z"
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
::::
|
||||
|
||||
## Conclusion
|
||||
|
||||
Here is how to request your Collection Types in Strapi using Next.js. When you create a Collection Type or a Single Type you will have a certain number of REST API endpoints available to interact with.
|
||||
|
||||
We just used the GET, POST and PUT methods here but you can [get one entry](../content-api/api-endpoints.html#get-an-entry), [get how much entry you have](../content-api/api-endpoints.html#count-entries) and [delete](../content-api/api-endpoints.html#delete-an-entry) an entry too. Learn more about [API Endpoints](../content-api/api-endpoints.html#api-endpoints)
|
||||
775
docs/v3.x/getting-started/nuxt-js.md
Normal file
775
docs/v3.x/getting-started/nuxt-js.md
Normal file
@ -0,0 +1,775 @@
|
||||
# Getting Started with Nuxt.js
|
||||
|
||||
This integration guide is following the [Getting started guide](../getting-started/quick-start.html). We assume that you have completed [Step 8](../getting-started/quick-start.html#_8-consume-the-content-type-s-api) and therefore can consume the API by browsing this [url](http://localhost:1337/restaurants).
|
||||
|
||||
If you haven't gone through the getting started guide, the way you request a Strapi API with [Nuxt.js](https://nuxtjs.org/) remains the same except that you will not fetch the same content.
|
||||
|
||||
### Create a Nuxt.js app
|
||||
|
||||
Create a basic Nuxt.js application with [create-nuxt-app](https://github.com/nuxt/create-nuxt-app).
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab yarn
|
||||
|
||||
```bash
|
||||
yarn create nuxt-app nuxtjs-app
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab npx
|
||||
|
||||
```bash
|
||||
npx create-nuxt-app nuxtjs-app
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
### Use an HTTP client
|
||||
|
||||
Many HTTP clients are available but in this documentation we'll use [Axios](https://github.com/axios/axios) and [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
|
||||
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab @nuxtjs/strapi
|
||||
|
||||
For this example we are using the awesome [@nuxt/strapi](https://strapi.nuxtjs.org/) module.
|
||||
|
||||
|
||||
```bash
|
||||
yarn add @nuxtjs/strapi
|
||||
```
|
||||
|
||||
- Add `@nuxtjs/strapi` to the module section of `nuxt.config.js` with the following settings
|
||||
|
||||
```js
|
||||
modules: ['@nuxtjs/strapi'],
|
||||
strapi: {
|
||||
entities: ['restaurants', 'categories'],
|
||||
url: 'http://localhost:1337'
|
||||
},
|
||||
```
|
||||
|
||||
|
||||
:::
|
||||
|
||||
::: tab axios
|
||||
|
||||
```bash
|
||||
yarn add axios
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
No installation needed
|
||||
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
### GET Request your collection type
|
||||
|
||||
Execute a GET request on the `restaurant` Collection Type in order to fetch all your restaurants.
|
||||
|
||||
Be sure that you activated the `find` permission for the `restaurant` Collection Type.
|
||||
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab @nuxtjs/strapi
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
try {
|
||||
await this.$strapi.find('restaurants')
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab axios
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
import axios from 'axios'
|
||||
|
||||
axios.get('http://localhost:1337/restaurants')
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
})
|
||||
```
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
fetch("http://localhost:1337/restaurants", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
}).then(response => response.json())
|
||||
.then(data => console.log(data));
|
||||
```
|
||||
:::
|
||||
|
||||
*Response*
|
||||
|
||||
```json
|
||||
[{
|
||||
"id": 1,
|
||||
"name": "Biscotte Restaurant",
|
||||
"description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
|
||||
"created_by": {
|
||||
"id": 1,
|
||||
"firstname": "Paul",
|
||||
"lastname": "Bocuse",
|
||||
"username": null
|
||||
},
|
||||
"updated_by": {
|
||||
"id": 1,
|
||||
"firstname": "Paul",
|
||||
"lastname": "Bocuse",
|
||||
"username": null
|
||||
},
|
||||
"created_at": "2020-07-31T11:37:16.964Z",
|
||||
"updated_at": "2020-07-31T11:37:16.975Z",
|
||||
"categories": [{
|
||||
"id": 2,
|
||||
"name": "French Food",
|
||||
"created_by": 1,
|
||||
"updated_by": 1,
|
||||
"created_at": "2020-07-31T11:36:23.164Z",
|
||||
"updated_at": "2020-07-31T11:36:23.172Z"
|
||||
}]
|
||||
}]
|
||||
```
|
||||
|
||||
::::
|
||||
|
||||
### Example
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab @nuxt/strapi
|
||||
|
||||
`./pages/index.vue`
|
||||
|
||||
```js
|
||||
<template>
|
||||
<div class="container">
|
||||
<div v-if="error">
|
||||
{{ error }}
|
||||
</div>
|
||||
<ul v-else>
|
||||
<li v-for="restaurant in restaurants" :key="restaurant.id">
|
||||
{{ restaurant.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App',
|
||||
data () {
|
||||
return {
|
||||
restaurants: [],
|
||||
error: null
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
try {
|
||||
this.restaurants = await this.$strapi.find('restaurants')
|
||||
} catch (error) {
|
||||
this.error = error
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab axios
|
||||
|
||||
`./pages/index.vue`
|
||||
|
||||
```js
|
||||
<template>
|
||||
<div class="container">
|
||||
<div v-if="error">
|
||||
{{ error }}
|
||||
</div>
|
||||
<ul v-else>
|
||||
<li v-for="restaurant in restaurants" :key="restaurant.id">
|
||||
{{ restaurant.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
data () {
|
||||
return {
|
||||
restaurants: [],
|
||||
error: null
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
try {
|
||||
const response = await axios.get('http://localhost:1337/restaurants')
|
||||
this.restaurants = response.data
|
||||
} catch (error) {
|
||||
this.error = error;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
`./pages/index.vue`
|
||||
|
||||
```js
|
||||
<template>
|
||||
<div id="app">
|
||||
<div v-if="error">
|
||||
{{ error }}
|
||||
</div>
|
||||
<ul v-else>
|
||||
<li v-for="restaurant in restaurants" :key="restaurant.id">
|
||||
{{ restaurant.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
data () {
|
||||
return {
|
||||
restaurants: [],
|
||||
error: null,
|
||||
headers: {'Content-Type': 'application/json'}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
parseJSON: function (resp) {
|
||||
return (resp.json ? resp.json() : resp);
|
||||
},
|
||||
checkStatus: function (resp) {
|
||||
if (resp.status >= 200 && resp.status < 300) {
|
||||
return resp;
|
||||
}
|
||||
return this.parseJSON(resp).then((resp) => {
|
||||
throw resp;
|
||||
});
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
try {
|
||||
const response = await fetch("http://localhost:1337/restaurants", {
|
||||
method: 'GET',
|
||||
headers: this.headers,
|
||||
}).then(this.checkStatus)
|
||||
.then(this.parseJSON);
|
||||
this.restaurants = response
|
||||
} catch (error) {
|
||||
this.error = error
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
### POST Request your collection type
|
||||
|
||||
Execute a POST request on the `restaurant` Collection Type in order to create a restaurant.
|
||||
|
||||
Be sure that you activated the `create` permission for the `restaurant` Collection Type and the `find` permission for the `category` Collection type.
|
||||
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab @nuxtjs/strapi
|
||||
|
||||
```js
|
||||
try {
|
||||
await this.$strapi.create('restaurants', {
|
||||
name: 'Dolemon Sushi',
|
||||
description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious',
|
||||
categories: [
|
||||
3
|
||||
]
|
||||
})
|
||||
} catch (error) {
|
||||
this.error = error
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
::: tab axios
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
import axios from 'axios'
|
||||
|
||||
axios.post('http://localhost:1337/restaurants', {
|
||||
name: 'Dolemon Sushi',
|
||||
description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious',
|
||||
categories: [
|
||||
3
|
||||
]
|
||||
})
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
})
|
||||
```
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
fetch('http://localhost:1337/restaurants', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: 'Dolemon Sushi',
|
||||
description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious',
|
||||
categories: [
|
||||
3
|
||||
]
|
||||
})
|
||||
}).then(response => response.json())
|
||||
.then(data => console.log(data));
|
||||
```
|
||||
:::
|
||||
|
||||
*Response*
|
||||
|
||||
```json
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Dolemon Sushi",
|
||||
"description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
|
||||
"created_by": null,
|
||||
"updated_by": null,
|
||||
"created_at": "2020-08-04T09:57:11.669Z",
|
||||
"updated_at": "2020-08-04T09:57:11.669Z",
|
||||
"categories": [{
|
||||
"id": 3,
|
||||
"name": "Japanese",
|
||||
"created_by": 1,
|
||||
"updated_by": 1,
|
||||
"created_at": "2020-07-31T11:36:23.164Z",
|
||||
"updated_at": "2020-07-31T11:36:23.172Z"
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
::::
|
||||
|
||||
### Example
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab @nuxtjs/strapi
|
||||
|
||||
`./pages/index.vue`
|
||||
|
||||
```js
|
||||
<template>
|
||||
<div class="container">
|
||||
<div v-if="error">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<form id="form" v-on:submit="handleSubmit" v-else>
|
||||
<h3>Restaurants</h3>
|
||||
<br>
|
||||
|
||||
<label for="name">Name</label>
|
||||
<input id="name" v-model="modifiedData.name" type="text" name="name">
|
||||
|
||||
<label for="description">Description</label>
|
||||
<input id="description" v-model="modifiedData.description" type="text" name="description">
|
||||
<div>
|
||||
<br />
|
||||
<b>Select categories</b>
|
||||
<br>
|
||||
<div v-for="category in allCategories" :key="category.id">
|
||||
<label>{{ category.name }}</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="category.id"
|
||||
v-model="modifiedData.categories"
|
||||
name="categories"
|
||||
:id="category.id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App',
|
||||
data() {
|
||||
return {
|
||||
allCategories: [],
|
||||
modifiedData: {
|
||||
name: '',
|
||||
description: '',
|
||||
categories: [],
|
||||
},
|
||||
error: null
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
this.allCategories = await this.$strapi.find('categories')
|
||||
} catch (error) {
|
||||
this.error = error
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit: async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
await this.$strapi.create('restaurants', this.modifiedData)
|
||||
} catch (error) {
|
||||
this.error = error
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab axios
|
||||
|
||||
`./pages/index.vue`
|
||||
|
||||
```js
|
||||
<template>
|
||||
<div id="app">
|
||||
<div v-if="error">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<form id="form" v-on:submit="handleSubmit" v-else>
|
||||
<label for="name">Name</label>
|
||||
<input id="name" v-model="modifiedData.name" type="text" name="name">
|
||||
|
||||
<label for="description">Description</label>
|
||||
<input id="description" v-model="modifiedData.description" type="text" name="description">
|
||||
|
||||
<div>
|
||||
<br />
|
||||
Select categories
|
||||
<div v-for="category in allCategories" :key="category.id">
|
||||
<label>{{ category.name }}</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="category.id"
|
||||
v-model="modifiedData.categories"
|
||||
name="categories"
|
||||
:id="category.id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
data() {
|
||||
return {
|
||||
allCategories: [],
|
||||
modifiedData: {
|
||||
name: '',
|
||||
description: '',
|
||||
categories: [],
|
||||
},
|
||||
error: null
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
const response = await axios.get('http://localhost:1337/categories')
|
||||
this.allCategories = response.data;
|
||||
} catch (error) {
|
||||
this.error = error;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit: async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
const response = await axios.post('http://localhost:1337/restaurants', this.modifiedData)
|
||||
console.log(response);
|
||||
} catch(error) {
|
||||
this.error = error;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
`./pages/index.vue`
|
||||
|
||||
```js
|
||||
<template>
|
||||
<div id="app">
|
||||
<div v-if="error">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<form id="form" v-on:submit="handleSubmit" v-else>
|
||||
<h3>Restaurants</h3>
|
||||
<br>
|
||||
|
||||
<label for="name">Name</label>
|
||||
<input id="name" v-model="modifiedData.name" type="text" name="name">
|
||||
|
||||
<label for="description">Description</label>
|
||||
<input id="description" v-model="modifiedData.description" type="text" name="description">
|
||||
<div>
|
||||
<br />
|
||||
<b>Select categories</b>
|
||||
<br>
|
||||
<div v-for="category in allCategories" :key="category.id">
|
||||
<label>{{ category.name }}</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="category.id"
|
||||
v-model="modifiedData.categories"
|
||||
name="categories"
|
||||
:id="category.id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App',
|
||||
data() {
|
||||
return {
|
||||
allCategories: [],
|
||||
modifiedData: {
|
||||
name: '',
|
||||
description: '',
|
||||
categories: [],
|
||||
},
|
||||
error: null,
|
||||
headers: {'Content-Type': 'application/json'}
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
const allCategories = await fetch("http://localhost:1337/categories", {
|
||||
method: 'GET',
|
||||
headers: this.headers,
|
||||
}).then(this.checkStatus)
|
||||
.then(this.parseJSON);
|
||||
this.allCategories = allCategories
|
||||
} catch (error) {
|
||||
this.error = error
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
parseJSON: function (resp) {
|
||||
return (resp.json ? resp.json() : resp);
|
||||
},
|
||||
checkStatus: function (resp) {
|
||||
if (resp.status >= 200 && resp.status < 300) {
|
||||
return resp;
|
||||
}
|
||||
return this.parseJSON(resp).then((resp) => {
|
||||
throw resp;
|
||||
});
|
||||
},
|
||||
handleSubmit: async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
const response = await fetch('http://localhost:1337/restaurants', {
|
||||
method: 'POST',
|
||||
headers: this.headers,
|
||||
body: JSON.stringify(this.modifiedData)
|
||||
}).then(this.checkStatus)
|
||||
.then(this.parseJSON);
|
||||
console.log(response);
|
||||
} catch (error) {
|
||||
this.error = error
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
### PUT Request your collection type
|
||||
|
||||
Execute a PUT request on the `restaurant` Collection Type in order to update the category of a restaurant.
|
||||
|
||||
Be sure that you activated the `put` permission for the `restaurant` Collection Type.
|
||||
|
||||
:::: tabs
|
||||
|
||||
We consider that the id of your restaurant is `2`
|
||||
and the id of your category is `3`
|
||||
|
||||
::: tab @nuxtjs/strapi
|
||||
|
||||
```js
|
||||
try {
|
||||
await this.$strapi.update('restaurants', 2, {
|
||||
categories: [
|
||||
3
|
||||
]
|
||||
})
|
||||
} catch (error) {
|
||||
this.error = error
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: tab axios
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
import axios from 'axios'
|
||||
|
||||
axios.put('http://localhost:1337/restaurants/2', {
|
||||
categories: [
|
||||
3
|
||||
]
|
||||
})
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
fetch('http://localhost:1337/restaurants/2', {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
categories: [
|
||||
3
|
||||
]
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
*Response*
|
||||
|
||||
```json
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Dolemon Sushi",
|
||||
"description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
|
||||
"created_by": null,
|
||||
"updated_by": null,
|
||||
"created_at": "2020-08-04T10:21:30.219Z",
|
||||
"updated_at": "2020-08-04T10:21:30.219Z",
|
||||
"categories": [{
|
||||
"id": 3,
|
||||
"name": "Japanese",
|
||||
"created_by": 1,
|
||||
"updated_by": 1,
|
||||
"created_at": "2020-08-04T10:24:26.901Z",
|
||||
"updated_at": "2020-08-04T10:24:26.911Z"
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
::::
|
||||
|
||||
## Conclusion
|
||||
|
||||
Here is how to request your Collection Types in Strapi using Nuxt.js. When you create a Collection Type or a Single Type you will have a certain number of REST API endpoints available to interact with.
|
||||
|
||||
We just used the GET, POST and PUT methods here but you can [get one entry](../content-api/api-endpoints.html#get-an-entry), [get how much entry you have](../content-api/api-endpoints.html#count-entries) and [delete](../content-api/api-endpoints.html#delete-an-entry) an entry too. Learn more about [API Endpoints](../content-api/api-endpoints.html#api-endpoints)
|
||||
@ -118,10 +118,16 @@ Here we are! The list of **restaurants** is accessible at [`http://localhost:133
|
||||
::: tip CONGRATULATIONS
|
||||
👏 Congratulations, you have now completed the **Strapi Quick Start**. Where to go next?
|
||||
|
||||
- Learn how to use Strapi with React ([Gatsby](https://strapi.io/blog/building-a-static-website-using-gatsby-and-strapi) or [Next.js](https://strapi.io/blog/strapi-next-setup/)) or Vue.js ([Nuxt.js](https://strapi.io/blog/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-setup-part-1-7/)).
|
||||
- Consume your API with your favorite frameworks, frontend or backend programming languages just below.
|
||||
- Learn how to use Strapi with React ([Gatsby](https://strapi.io/blog/build-a-static-blog-with-gatsby-and-strapi) or [Next.js](https://strapi.io/blog/nextjs-react-hooks-strapi-food-app-1)) or Vue.js ([Nuxt.js](https://strapi.io/blog/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-setup-part-1-7/)).
|
||||
- Read the **concepts** and do the [Tutorial](quick-start-tutorial.md) to deep dive into Strapi.
|
||||
- Get help on [Github Discussions](https://github.com/strapi/strapi/discussions).
|
||||
- Read the [source code](https://github.com/strapi/strapi), [contribute](https://github.com/strapi/strapi/blob/master/CONTRIBUTING.md) or [give a star](https://github.com/strapi/strapi) on GitHub.
|
||||
- Follow us on [Twitter](https://twitter.com/strapijs) to get the latest news.
|
||||
- [Join the vibrant and active Strapi community](https://slack.strapi.io) on Slack.
|
||||
:::
|
||||
|
||||
### Consume your API using one of these technologies:
|
||||
|
||||
<IntegrationLinks>
|
||||
</IntegrationLinks>
|
||||
|
||||
713
docs/v3.x/getting-started/react.md
Normal file
713
docs/v3.x/getting-started/react.md
Normal file
@ -0,0 +1,713 @@
|
||||
# Getting Started with React
|
||||
|
||||
This integration guide is following the [Getting started guide](../getting-started/quick-start.html). We assume that you have completed [Step 8](../getting-started/quick-start.html#_8-consume-the-content-type-s-api) and therefore can consume the API by browsing this [url](http://localhost:1337/restaurants).
|
||||
|
||||
If you haven't gone through the getting started guide, the way you request a Strapi API with [React](https://reactjs.org/) remains the same except that you will not fetch the same content.
|
||||
|
||||
|
||||
### Create a React app
|
||||
|
||||
Create a basic React application using [create-react-app](https://reactjs.org/docs/create-a-new-react-app.html).
|
||||
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab yarn
|
||||
|
||||
```bash
|
||||
yarn create react-app react-app
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab npx
|
||||
|
||||
```bash
|
||||
npx create-react-app react-app
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
### Use an HTTP client
|
||||
|
||||
Many HTTP clients are available but in this documentation we'll use [Axios](https://github.com/axios/axios) and [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
|
||||
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab axios
|
||||
|
||||
```bash
|
||||
yarn add axios
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
No installation needed
|
||||
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
### GET Request your collection type
|
||||
|
||||
Execute a GET request on the `restaurant` Collection Type in order to fetch all your restaurants.
|
||||
|
||||
Be sure that you activated the `find` permission for the `restaurant` Collection Type
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab axios
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
import axios from 'axios'
|
||||
|
||||
axios.get('http://localhost:1337/restaurants')
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
fetch("http://localhost:1337/restaurants", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
}).then(response => response.json())
|
||||
.then(data => console.log(data));
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
*Response*
|
||||
|
||||
```json
|
||||
[{
|
||||
"id": 1,
|
||||
"name": "Biscotte Restaurant",
|
||||
"description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
|
||||
"created_by": {
|
||||
"id": 1,
|
||||
"firstname": "Paul",
|
||||
"lastname": "Bocuse",
|
||||
"username": null
|
||||
},
|
||||
"updated_by": {
|
||||
"id": 1,
|
||||
"firstname": "Paul",
|
||||
"lastname": "Bocuse",
|
||||
"username": null
|
||||
},
|
||||
"created_at": "2020-07-31T11:37:16.964Z",
|
||||
"updated_at": "2020-07-31T11:37:16.975Z",
|
||||
"categories": [{
|
||||
"id": 2,
|
||||
"name": "French Food",
|
||||
"created_by": 1,
|
||||
"updated_by": 1,
|
||||
"created_at": "2020-07-31T11:36:23.164Z",
|
||||
"updated_at": "2020-07-31T11:36:23.172Z"
|
||||
}]
|
||||
}]
|
||||
```
|
||||
|
||||
::::
|
||||
|
||||
### Example
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab axios
|
||||
|
||||
`./src/App.js`
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import axios from 'axios'
|
||||
|
||||
class App extends React.Component {
|
||||
|
||||
// State of your application
|
||||
state = {
|
||||
restaurants: [],
|
||||
error: null
|
||||
}
|
||||
|
||||
// Fetch your restaurants immediately after the component is mounted
|
||||
componentDidMount = async () => {
|
||||
try {
|
||||
const response = await axios.get('http://localhost:1337/restaurants');
|
||||
this.setState({ restaurants: response.data })
|
||||
} catch(error) {
|
||||
this.setState({ error })
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { error, restaurant } = this.state
|
||||
|
||||
// Print errors if any
|
||||
if (error) {
|
||||
return <div>An error occured: {error.message}</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<ul>
|
||||
{this.state.restaurants.map(restaurant => <li key={restaurant.id}>{restaurant.name}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
`./src/App.js`
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
|
||||
class App extends React.Component {
|
||||
|
||||
// State of your application
|
||||
state = {
|
||||
restaurants: [],
|
||||
error: null
|
||||
}
|
||||
|
||||
// Fetch your restaurants immediately after the component is mounted
|
||||
componentDidMount = async () => {
|
||||
// Parses the JSON returned by a network request
|
||||
const parseJSON = (resp) => (resp.json ? resp.json() : resp);
|
||||
|
||||
// Checks if a network request came back fine, and throws an error if not
|
||||
const checkStatus = (resp) => {
|
||||
if (resp.status >= 200 && resp.status < 300) {
|
||||
return resp;
|
||||
}
|
||||
return parseJSON(resp).then((resp) => {
|
||||
throw resp;
|
||||
});
|
||||
};
|
||||
const headers = {
|
||||
'Content-Type': 'application/json',
|
||||
};
|
||||
|
||||
try {
|
||||
const restaurants = await fetch("http://localhost:1337/restaurants", {
|
||||
method: "GET",
|
||||
headers: headers,
|
||||
}).then(checkStatus)
|
||||
.then(parseJSON);
|
||||
this.setState({ restaurants })
|
||||
} catch (error) {
|
||||
this.setState({ error })
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { error, restaurant } = this.state
|
||||
|
||||
// Print errors if any
|
||||
if (error) {
|
||||
return <div>An error occured: {error.message}</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<ul>
|
||||
{ this.state.restaurants.map(restaurant => <li key={restaurant.id}>{restaurant.name}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
### POST Request your collection type
|
||||
|
||||
Execute a POST request on the `restaurant` Collection Type in order to create a restaurant.
|
||||
|
||||
Be sure that you activated the `create` permission for the `restaurant` Collection Type and the `find` permission fot the `category` Collection type.
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab axios
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
import axios from 'axios'
|
||||
|
||||
axios.post('http://localhost:1337/restaurants', {
|
||||
name: 'Dolemon Sushi',
|
||||
description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious',
|
||||
categories: [
|
||||
3
|
||||
]
|
||||
})
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
fetch('http://localhost:1337/restaurants', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: 'Dolemon Sushi',
|
||||
description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious',
|
||||
categories: [
|
||||
3
|
||||
]
|
||||
})
|
||||
}).then(response => response.json())
|
||||
.then(data => console.log(data));
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
*Response*
|
||||
|
||||
```json
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Dolemon Sushi",
|
||||
"description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
|
||||
"created_by": null,
|
||||
"updated_by": null,
|
||||
"created_at": "2020-08-04T09:57:11.669Z",
|
||||
"updated_at": "2020-08-04T09:57:11.669Z",
|
||||
"categories": [{
|
||||
"id": 3,
|
||||
"name": "Japanese",
|
||||
"created_by": 1,
|
||||
"updated_by": 1,
|
||||
"created_at": "2020-07-31T11:36:23.164Z",
|
||||
"updated_at": "2020-07-31T11:36:23.172Z"
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
::::
|
||||
|
||||
### Example
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab axios
|
||||
|
||||
`./src/App.js`
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import axios from 'axios'
|
||||
|
||||
class App extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
// State of your application
|
||||
this.state = {
|
||||
modifiedData: {
|
||||
name: "",
|
||||
description: "",
|
||||
categories: []
|
||||
},
|
||||
allCategories: [],
|
||||
error: null
|
||||
};
|
||||
}
|
||||
|
||||
// Fetch your categories immediately after the component is mounted
|
||||
componentDidMount = async () => {
|
||||
try {
|
||||
const response = await axios.get('http://localhost:1337/categories');
|
||||
this.setState({ allCategories: response.data });
|
||||
} catch(error) {
|
||||
this.setState({ error })
|
||||
}
|
||||
}
|
||||
|
||||
handleInputChange = ({ target: { name, value } }) => {
|
||||
this.setState(prev => ({
|
||||
...prev,
|
||||
modifiedData: {
|
||||
...prev.modifiedData,
|
||||
[name]: value
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
handleSubmit = async e => {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
const response = await axios.post('http://localhost:1337/restaurants', this.state.modifiedData);
|
||||
console.log(response);
|
||||
} catch(error) {
|
||||
this.setState({ error });
|
||||
}
|
||||
}
|
||||
|
||||
renderCheckbox = category => {
|
||||
const {
|
||||
modifiedData: { categories }
|
||||
} = this.state;
|
||||
const isChecked = categories.includes(category.id);
|
||||
const handleChange = () => {
|
||||
if (!categories.includes(category.id)) {
|
||||
this.handleInputChange({
|
||||
target: { name: "categories", value: categories.concat(category.id) }
|
||||
});
|
||||
} else {
|
||||
this.handleInputChange({
|
||||
target: {
|
||||
name: "categories",
|
||||
value: categories.filter(v => v !== category.id)
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={category.id}>
|
||||
<label htmlFor={category.id}>{category.name}</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isChecked}
|
||||
onChange={handleChange}
|
||||
name="categories"
|
||||
id={category.id}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { error, allCategories, modifiedData } = this.state;
|
||||
|
||||
// Print errors if any
|
||||
if (error) {
|
||||
return <div>An error occured: {error.message}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<h3>Restaurants</h3>
|
||||
<br />
|
||||
<label>
|
||||
Name:
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
onChange={this.handleInputChange}
|
||||
value={modifiedData.name}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Description:
|
||||
<input
|
||||
type="text"
|
||||
name="description"
|
||||
onChange={this.handleInputChange}
|
||||
value={modifiedData.description}
|
||||
/>
|
||||
</label>
|
||||
<div>
|
||||
<br />
|
||||
<b>Select categories</b>
|
||||
{allCategories.map(this.renderCheckbox)}
|
||||
</div>
|
||||
<br />
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
`./src/App.js`
|
||||
|
||||
```js
|
||||
import React from "react";
|
||||
|
||||
// Parses the JSON returned by a network request
|
||||
const parseJSON = (resp) => (resp.json ? resp.json() : resp);
|
||||
|
||||
// Checks if a network request came back fine, and throws an error if not
|
||||
const checkStatus = (resp) => {
|
||||
if (resp.status >= 200 && resp.status < 300) {
|
||||
return resp;
|
||||
}
|
||||
return parseJSON(resp).then((resp) => {
|
||||
throw resp;
|
||||
});
|
||||
};
|
||||
const headers = {
|
||||
'Content-Type': 'application/json',
|
||||
};
|
||||
|
||||
class App extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
modifiedData: {
|
||||
name: "",
|
||||
description: "",
|
||||
categories: []
|
||||
},
|
||||
allCategories: [],
|
||||
error: null
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount = async () => {
|
||||
try {
|
||||
const allCategories = await fetch("http://localhost:1337/categories", {
|
||||
method: "GET",
|
||||
headers: headers,
|
||||
}).then(checkStatus)
|
||||
.then(parseJSON);
|
||||
this.setState({ allCategories })
|
||||
} catch (error) {
|
||||
this.setState({ error });
|
||||
}
|
||||
}
|
||||
|
||||
handleInputChange = ({ target: { name, value } }) => {
|
||||
this.setState(prev => ({
|
||||
...prev,
|
||||
modifiedData: {
|
||||
...prev.modifiedData,
|
||||
[name]: value
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
handleSubmit = async(e) => {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
await fetch('http://localhost:1337/restaurants', {
|
||||
method: "POST",
|
||||
headers: headers,
|
||||
body: JSON.stringify(this.state.modifiedData)
|
||||
})
|
||||
.then(checkStatus)
|
||||
.then(parseJSON);
|
||||
} catch (error) {
|
||||
this.setState({ error })
|
||||
}
|
||||
};
|
||||
|
||||
renderCheckbox = category => {
|
||||
const {
|
||||
modifiedData: { categories }
|
||||
} = this.state;
|
||||
const isChecked = categories.includes(category.id);
|
||||
const handleChange = () => {
|
||||
if (!categories.includes(category.id)) {
|
||||
this.handleInputChange({
|
||||
target: { name: "categories", value: categories.concat(category.id) }
|
||||
});
|
||||
} else {
|
||||
this.handleInputChange({
|
||||
target: {
|
||||
name: "categories",
|
||||
value: categories.filter(v => v !== category.id)
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={category.id}>
|
||||
<label htmlFor={category.id}>{category.name}</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isChecked}
|
||||
onChange={handleChange}
|
||||
name="categories"
|
||||
id={category.id}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { error, allCategories, modifiedData } = this.state;
|
||||
|
||||
// Print error if any
|
||||
if (error) {
|
||||
return <div>An error occured: {error.message}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<h3>Restaurants</h3>
|
||||
<br />
|
||||
<label>
|
||||
Name:
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
onChange={this.handleInputChange}
|
||||
value={modifiedData.name}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Description:
|
||||
<input
|
||||
type="text"
|
||||
name="description"
|
||||
onChange={this.handleInputChange}
|
||||
value={modifiedData.description}
|
||||
/>
|
||||
</label>
|
||||
<div>
|
||||
<br />
|
||||
<b>Select categories</b>
|
||||
{allCategories.map(this.renderCheckbox)}
|
||||
</div>
|
||||
<br />
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
### PUT Request your collection type
|
||||
|
||||
Execute a PUT request on the `restaurant` Collection Type in order to update the category of a restaurant.
|
||||
|
||||
Be sure that you activated the `put` permission for the `restaurant` Collection Type.
|
||||
|
||||
:::: tabs
|
||||
|
||||
We consider that the id of your restaurant is `2`
|
||||
and the id of your category is `3`
|
||||
|
||||
::: tab axios
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
import axios from 'axios'
|
||||
|
||||
axios.put('http://localhost:1337/restaurants/2', {
|
||||
categories: [
|
||||
3
|
||||
]
|
||||
})
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
fetch('http://localhost:1337/restaurants/2', {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
categories: [
|
||||
3
|
||||
]
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
*Response*
|
||||
|
||||
```json
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Dolemon Sushi",
|
||||
"description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
|
||||
"created_by": null,
|
||||
"updated_by": null,
|
||||
"created_at": "2020-08-04T10:21:30.219Z",
|
||||
"updated_at": "2020-08-04T10:21:30.219Z",
|
||||
"categories": [{
|
||||
"id": 3,
|
||||
"name": "Japanese",
|
||||
"created_by": 1,
|
||||
"updated_by": 1,
|
||||
"created_at": "2020-08-04T10:24:26.901Z",
|
||||
"updated_at": "2020-08-04T10:24:26.911Z"
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
::::
|
||||
|
||||
## Conclusion
|
||||
|
||||
Here is how to request your Collection Types in Strapi using React. When you create a Collection Type or a Single Type you will have a certain number of REST API endpoints available to interact with.
|
||||
|
||||
We just used the GET, POST and PUT methods here but you can [get one entry](../content-api/api-endpoints.html#get-an-entry), [get how much entry you have](../content-api/api-endpoints.html#count-entries) and [delete](../content-api/api-endpoints.html#delete-an-entry) an entry too. Learn more about [API Endpoints](../content-api/api-endpoints.html#api-endpoints)
|
||||
574
docs/v3.x/getting-started/vue-js.md
Normal file
574
docs/v3.x/getting-started/vue-js.md
Normal file
@ -0,0 +1,574 @@
|
||||
# Getting Started with Vue.js
|
||||
|
||||
This integration guide is following the [Getting started guide](../getting-started/quick-start.html). We assume that you have completed [Step 8](../getting-started/quick-start.html#_8-consume-the-content-type-s-api) and therefore can consume the API by browsing this [url](http://localhost:1337/restaurants).
|
||||
|
||||
If you haven't gone through the getting started guide, the way you request a Strapi API with [Vue.js](https://vuejs.org/) remains the same except that you will not fetch the same content.
|
||||
|
||||
|
||||
### Create a Vue.js app
|
||||
|
||||
Create a basic Vue.js application using [Vue CLI](https://cli.vuejs.org).
|
||||
|
||||
|
||||
```bash
|
||||
vue create vue-app
|
||||
```
|
||||
|
||||
|
||||
### Use an HTTP client
|
||||
|
||||
Many HTTP clients are available but in this documentation we'll use [Axios](https://github.com/axios/axios) and [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
|
||||
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab axios
|
||||
|
||||
```bash
|
||||
yarn add axios
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
No installation needed
|
||||
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
### GET Request your collection type
|
||||
|
||||
Execute a GET request on the `restaurant` Collection Type in order to fetch all your restaurants.
|
||||
|
||||
Be sure that you activated the `find` permission for the `restaurant` Collection Type.
|
||||
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab axios
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
import axios from 'axios'
|
||||
|
||||
axios.get('http://localhost:1337/restaurants')
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
fetch("http://localhost:1337/restaurants", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
}).then(response => response.json())
|
||||
.then(data => console.log(data));
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
*Response*
|
||||
|
||||
```json
|
||||
[{
|
||||
"id": 1,
|
||||
"name": "Biscotte Restaurant",
|
||||
"description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
|
||||
"created_by": {
|
||||
"id": 1,
|
||||
"firstname": "Paul",
|
||||
"lastname": "Bocuse",
|
||||
"username": null
|
||||
},
|
||||
"updated_by": {
|
||||
"id": 1,
|
||||
"firstname": "Paul",
|
||||
"lastname": "Bocuse",
|
||||
"username": null
|
||||
},
|
||||
"created_at": "2020-07-31T11:37:16.964Z",
|
||||
"updated_at": "2020-07-31T11:37:16.975Z",
|
||||
"categories": [{
|
||||
"id": 2,
|
||||
"name": "French Food",
|
||||
"created_by": 1,
|
||||
"updated_by": 1,
|
||||
"created_at": "2020-07-31T11:36:23.164Z",
|
||||
"updated_at": "2020-07-31T11:36:23.172Z"
|
||||
}]
|
||||
}]
|
||||
```
|
||||
|
||||
::::
|
||||
|
||||
### Example
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab axios
|
||||
|
||||
`./src/App.vue`
|
||||
|
||||
```js
|
||||
<template>
|
||||
<div id="app">
|
||||
<div v-if="error">
|
||||
{{ error }}
|
||||
</div>
|
||||
<ul v-else>
|
||||
<li v-for="restaurant in restaurants" :key="restaurant.id">
|
||||
{{ restaurant.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
data () {
|
||||
return {
|
||||
restaurants: [],
|
||||
error: null
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
try {
|
||||
const response = await axios.get('http://localhost:1337/restaurants')
|
||||
this.restaurants = response.data
|
||||
} catch (error) {
|
||||
this.error = error;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
`./src/App.vue`
|
||||
|
||||
```js
|
||||
<template>
|
||||
<div id="app">
|
||||
<div v-if="error">
|
||||
{{ error }}
|
||||
</div>
|
||||
<ul v-else>
|
||||
<li v-for="restaurant in restaurants" :key="restaurant.id">
|
||||
{{ restaurant.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
data () {
|
||||
return {
|
||||
restaurants: [],
|
||||
error: null,
|
||||
headers: {'Content-Type': 'application/json'}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
parseJSON: function (resp) {
|
||||
return (resp.json ? resp.json() : resp);
|
||||
},
|
||||
checkStatus: function (resp) {
|
||||
if (resp.status >= 200 && resp.status < 300) {
|
||||
return resp;
|
||||
}
|
||||
return this.parseJSON(resp).then((resp) => {
|
||||
throw resp;
|
||||
});
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
try {
|
||||
const response = await fetch("http://localhost:1337/restaurants", {
|
||||
method: 'GET',
|
||||
headers: this.headers,
|
||||
}).then(this.checkStatus)
|
||||
.then(this.parseJSON);
|
||||
this.restaurants = response
|
||||
} catch (error) {
|
||||
this.error = error
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
### POST Request your collection type
|
||||
|
||||
Execute a POST request on the `restaurant` Collection Type in order to create a restaurant.
|
||||
|
||||
Be sure that you activated the `create` permission for the `restaurant` Collection Type and the `find` permission for the `category` Collection type.
|
||||
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab axios
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
import axios from 'axios'
|
||||
|
||||
axios.post('http://localhost:1337/restaurants', {
|
||||
name: 'Dolemon Sushi',
|
||||
description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious',
|
||||
categories: [
|
||||
3
|
||||
]
|
||||
})
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
fetch('http://localhost:1337/restaurants', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: 'Dolemon Sushi',
|
||||
description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious',
|
||||
categories: [
|
||||
3
|
||||
]
|
||||
})
|
||||
}).then(response => response.json())
|
||||
.then(data => console.log(data));
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
*Response*
|
||||
|
||||
```json
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Dolemon Sushi",
|
||||
"description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
|
||||
"created_by": null,
|
||||
"updated_by": null,
|
||||
"created_at": "2020-08-04T09:57:11.669Z",
|
||||
"updated_at": "2020-08-04T09:57:11.669Z",
|
||||
"categories": [{
|
||||
"id": 3,
|
||||
"name": "Japanese",
|
||||
"created_by": 1,
|
||||
"updated_by": 1,
|
||||
"created_at": "2020-07-31T11:36:23.164Z",
|
||||
"updated_at": "2020-07-31T11:36:23.172Z"
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
::::
|
||||
|
||||
### Example
|
||||
|
||||
:::: tabs
|
||||
|
||||
::: tab axios
|
||||
|
||||
`./src/App.vue`
|
||||
|
||||
```js
|
||||
<template>
|
||||
<div id="app">
|
||||
<div v-if="error">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<form id="form" v-on:submit="handleSubmit" v-else>
|
||||
<label for="name">Name</label>
|
||||
<input id="name" v-model="modifiedData.name" type="text" name="name">
|
||||
|
||||
<label for="description">Description</label>
|
||||
<input id="description" v-model="modifiedData.description" type="text" name="description">
|
||||
|
||||
<div>
|
||||
<br />
|
||||
Select categories
|
||||
<div v-for="category in allCategories" :key="category.id">
|
||||
<label>{{ category.name }}</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="category.id"
|
||||
v-model="modifiedData.categories"
|
||||
name="categories"
|
||||
:id="category.id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
data() {
|
||||
return {
|
||||
allCategories: [],
|
||||
modifiedData: {
|
||||
name: '',
|
||||
description: '',
|
||||
categories: [],
|
||||
},
|
||||
error: null
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
const response = await axios.get('http://localhost:1337/categories')
|
||||
this.allCategories = response.data;
|
||||
} catch (error) {
|
||||
this.error = error;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit: async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
const response = await axios.post('http://localhost:1337/restaurants', this.modifiedData)
|
||||
console.log(response);
|
||||
} catch(error) {
|
||||
this.error = error;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
`./src/App.vue`
|
||||
|
||||
```js
|
||||
<template>
|
||||
<div id="app">
|
||||
<div v-if="error">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<form id="form" v-on:submit="handleSubmit" v-else>
|
||||
<h3>Restaurants</h3>
|
||||
<br>
|
||||
|
||||
<label for="name">Name</label>
|
||||
<input id="name" v-model="modifiedData.name" type="text" name="name">
|
||||
|
||||
<label for="description">Description</label>
|
||||
<input id="description" v-model="modifiedData.description" type="text" name="description">
|
||||
<div>
|
||||
<br />
|
||||
<b>Select categories</b>
|
||||
<br>
|
||||
<div v-for="category in allCategories" :key="category.id">
|
||||
<label>{{ category.name }}</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="category.id"
|
||||
v-model="modifiedData.categories"
|
||||
name="categories"
|
||||
:id="category.id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App',
|
||||
data() {
|
||||
return {
|
||||
allCategories: [],
|
||||
modifiedData: {
|
||||
name: '',
|
||||
description: '',
|
||||
categories: [],
|
||||
},
|
||||
error: null,
|
||||
headers: {'Content-Type': 'application/json'}
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
const allCategories = await fetch("http://localhost:1337/categories", {
|
||||
method: 'GET',
|
||||
headers: this.headers,
|
||||
}).then(this.checkStatus)
|
||||
.then(this.parseJSON);
|
||||
this.allCategories = allCategories
|
||||
} catch (error) {
|
||||
this.error = error
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
parseJSON: function (resp) {
|
||||
return (resp.json ? resp.json() : resp);
|
||||
},
|
||||
checkStatus: function (resp) {
|
||||
if (resp.status >= 200 && resp.status < 300) {
|
||||
return resp;
|
||||
}
|
||||
return this.parseJSON(resp).then((resp) => {
|
||||
throw resp;
|
||||
});
|
||||
},
|
||||
handleSubmit: async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
const response = await fetch('http://localhost:1337/restaurants', {
|
||||
method: 'POST',
|
||||
headers: this.headers,
|
||||
body: JSON.stringify(this.modifiedData)
|
||||
}).then(this.checkStatus)
|
||||
.then(this.parseJSON);
|
||||
console.log(response);
|
||||
} catch (error) {
|
||||
this.error = error
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::::
|
||||
|
||||
### PUT Request your collection type
|
||||
|
||||
Execute a PUT request on the `restaurant` Collection Type in order to update the category of a restaurant.
|
||||
|
||||
Be sure that you activated the `put` permission for the `restaurant` Collection Type.
|
||||
|
||||
:::: tabs
|
||||
|
||||
We consider that the id of your restaurant is `2`
|
||||
and the id of your category is `3`
|
||||
|
||||
::: tab axios
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
import axios from 'axios'
|
||||
|
||||
axios.put('http://localhost:1337/restaurants/2', {
|
||||
categories: [
|
||||
3
|
||||
]
|
||||
})
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tab fetch
|
||||
|
||||
*Request*
|
||||
|
||||
```js
|
||||
fetch('http://localhost:1337/restaurants/2', {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
categories: [
|
||||
3
|
||||
]
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
*Response*
|
||||
|
||||
```json
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Dolemon Sushi",
|
||||
"description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
|
||||
"created_by": null,
|
||||
"updated_by": null,
|
||||
"created_at": "2020-08-04T10:21:30.219Z",
|
||||
"updated_at": "2020-08-04T10:21:30.219Z",
|
||||
"categories": [{
|
||||
"id": 3,
|
||||
"name": "Japanese",
|
||||
"created_by": 1,
|
||||
"updated_by": 1,
|
||||
"created_at": "2020-08-04T10:24:26.901Z",
|
||||
"updated_at": "2020-08-04T10:24:26.911Z"
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
::::
|
||||
|
||||
## Conclusion
|
||||
|
||||
Here is how to request your Collection Types in Strapi using Vue.js. When you create a Collection Type or a Single Type you will have a certain number of REST API endpoints available to interact with.
|
||||
|
||||
We just used the GET, POST and PUT methods here but you can [get one entry](../content-api/api-endpoints.html#get-an-entry), [get how much entry you have](../content-api/api-endpoints.html#count-entries) and [delete](../content-api/api-endpoints.html#delete-an-entry) an entry too. Learn more about [API Endpoints](../content-api/api-endpoints.html#api-endpoints)
|
||||
Loading…
x
Reference in New Issue
Block a user