Overview
This package provides a Data Provider origin for reading data from Prismic CMS API. As underlay, it uses the prismic-javascript client to provide the Prismic data.
Api
import { Prismic } from "@data-provider/prismic"
new Prismic(options)
- Arguments
- options -
<Object>
Apart from common Data Provider options, this addon has next custom options: - url -
<String>
. Prismic api url.- fullResponse -
<Boolean>
Iftrue
, the full response of the Prismic api will be used as value. Iffalse
, only theresponse.results
property will be returned, which is the default behavior. - release -
<String>
Prismic release to be read. This parameter will be passed asref
to the prismic-javascript query.
- fullResponse -
- options -
Methods
query
prismic.query(queryValue)
- Arguments
- queryValue -
<Object>
containing properties:- documentType -
<String>
Prismic document type to filter by. (It will be used to build a prismic-javascript query as inPrismicJs.Predicates.at("document.type", documentType)
)
- documentType -
- queryValue -
- Returns - New queried instance having all common Data Provider methods.
config
Configure instance for all next read
executions.
prismic.config(options)
- Arguments
- options -
<Object>
containing properties:- url -
<String>
Prismic api url. - fullResponse -
<Boolean>
Iftrue
, the full response of the Prismic api will be used as value. Iffalse
, only theresponse.results
property will be returned, which is the default behavior. - release -
<String>
Prismic release to be read. This parameter will be passed asref
to the prismic-javascript query.
- url -
- options -
Read about how to configure all @data-provider/prismic instances at a time using the Data Provider providers
handler.
Example of how to change all @data-provider/prismic
requests urls at a time:
import { providers } from "@data-provider/core";
providers.getByTag("prismic").config({
url: "https://foo-prismic-repository.cdn.prismic.io/api/v2"
});
// All @data-provider/prismic instances will now be configured to request to provided url.
Example
Next example will be easier to understand if you are already familiarized with the Data Provider syntax.
import { Prismic } from "@data-provider/prismic";
const prismic = new Prismic({
url: "https://foo-prismic-repository.cdn.prismic.io/api/v2",
release: "foo-release"
});
prismic
.query({ documentType: "home-banner" })
.read()
.then(results => {
console.log("Prismic content for home banner in foo-release", results);
});
Usage with frameworks
React
Please refer to the @data-provider/react UI addon documentation to see how simple is the data-binding between React Components and @data-provider/prismic.
Connect a provider to all components that need it. Data Provider will fetch data only when needed, and will avoid making it more than once, no matter how many components need the data.
Tags
Providers created with this addon will have automatically the prismic
tag, so you can select all of them together using the providers
methods as in:
import { providers } from "@data-provider/core";
providers.getByTag("prismic").cleanCache();
Contributing
Contributors are welcome. Please read the contributing guidelines and code of conduct.