Paramétrage
Le connecteur est programmé pour fonctionner avec deux CMD Headless différents : WordPress et Directus. Pour configurer le CMS qui sera utilisé par le connecteur, il y a deux fichiers à modifier.
Environnement
Pour utiliser le connecteur, il faut renseigner les informations du CMS qui sera utilisé comme dans l'exemple ci-dessous. Il est possible de supprimer les éléments du CMS qui n'est pas utilisé.
| Bloc de code |
|---|
|
# DIRECTUS
DIRECTUS_URL=http://localhost:8055
DIRECTUS_KEY=key
DIRECTUS_SOCIAL_NETWORK_PATH=/items/social_networks
DIRECTUS_PAGE_PATH=/items/pages
DIRECTUS_LANGUAGE_PATH=/items/languages
DIRECTUS_CHANNEL_PATH=/items/channels
DIRECTUS_FEATURE_PATH=/items/features
DIRECTUS_ASSETS_PATH=/assets
DIRECTUS_IMPORTANT_NEWS_PATH=/items/important_news
DIRECTUS_CONTACT_US_PATH=/items/contact_us
DIRECTUS_LOGIN_PATH=/items/login
DIRECTUS_WIDGET_PATH=/items/widgets
DIRECTUS_FIELDS=?fields[]=*
DIRECTUS_FIELDS_TRANSLATIONS=,translations.*
DIRECTUS_FIELDS_AUTHORIZATION=,authorization.*
# WORDPRESS
WORDPRESS_URL=http://localhost:9090/wp-json/wp/v2
WORDPRESS_ASSETS_PATH=http://localhost:9090/wp-content/uploads/
WORDPRESS_OPTIONS=?acf_format=standard&_fields=acf,id&per_page=100
WORDPRESS_SOCIAL_NETWORK_PATH=/social-network
WORDPRESS_FEATURE_PATH=/features
WORDPRESS_PAGE_PATH=/page-api
WORDPRESS_IMPORTANT_NEWS_PATH=/important-news
WORDPRESS_CONTACT_US_PATH=/contact-us
WORDPRESS_LOGIN_PATH=/login
WORDPRESS_CHANNEL_PATH=/channels
WORDPRESS_WIDGET_PATH=/widgets
WORDPRESS_LANGUAGE_PATH=/language |
Modules
Dans le fichier module, il faut importer le module que l'on souhaite utiliser et le renseigner dans la partie imports comme ci-dessous indiqué par les chevrons. Il faudra également modifier le module qui s'occupe des assets.
| Bloc de code |
|---|
| title | fichier app.module.ts |
|---|
|
@Module({
imports: [
GraphQLModule.forRoot<ApolloDriverConfig>({
driver: ApolloDriver,
autoSchemaFile: join(process.cwd(), 'src/schema.gpl'),
sortSchema: true,
}),
ConfigModule.forRoot({ envFilePath: '.env' }),
<<WordpressModule>>,
],
})
export class AppModule implements NestModule {
configure(consumer: MiddlewareConsumer) {
consumer.apply(<<WordpressImageMiddleware>>).forRoutes('assets');
}
} |
Paramètres d'appels
URL en méthode POST
| Bloc de code |
|---|
<host>/graphql |
- host : adresse du serveur
Header de la requête :
| Bloc de code |
|---|
{
"Content-Type": application/json
} |
Body des requêtes :
CMS a été pensé de manière à pouvoir s'interfacer avec plusieurs CMS. Actuellement, 2 modules permettent de communiquer avec Wordpress et Directus.
La configuration du CMS qui sera utilisé se fait au niveau du fichier .env
| Bloc de code |
|---|
|
# CMS TO USE : directus | wordpress
DEFAULT_CMS=
# DIRECTUS
#DIRECTUS_API_URL=xxx
#DIRECTUS_API_TOKEN=xxx
# WORDPRESS
#WORDPRESS_API_URL=xxx
#WORDPRESS_API_USERNAME=xxx
#WORDPRESS_API_PASSWORD=xxx |
Dans DEFAULT_CMS indiquez le CMS souhaité, puis dé-commentez les lignes de conf propres au CMS choisi.
Collections et leurs champs disponibles
Channels
| Bloc de code |
|---|
| title | Toutes les instances de la collection |
|---|
| collapse | true |
|---|
|
query {
channels {
id
code
color
icon
routerLink
filterable
translations {
languagesCode
label
}
}
} |
| Bloc de code |
|---|
| language | yaml |
|---|
| title | Récupérer une instance de la collection |
|---|
| collapse | true |
|---|
|
query {
channel(id: "1") {
id
code
color
icon
routerLink
filterable
translations {
languagesCode
label
}
}
} |
| Bloc de code |
|---|
| language | yaml |
|---|
| title | Exemple de réponse |
|---|
| collapse | true |
|---|
|
{
"data": {
"channel": {
|
| Bloc de code |
|---|
|
query {
channels{
"id": "1",
"code": "ALERT",
routerLink
"color": "#EF154E",
"icon": null,
color"routerLink": null,
"filterable": false,
"translations": [
{
"languagesCode": "en",
"label": "ALERT"
},
{
"languagesCode": "fr",
"label": "ALERTE"
}
]
}
}
} |
| Bloc de code |
|---|
|
query {
contactUs{
id
to
icon
translations{
languagesCode
content
title
}
}
} |
...