apollo-link-prismic
Purpose
An Apollo Link that allow you query Prismic's GraphQL API with apollo-client.
Installation
npm install apollo-link-prismic
Usage
import { ApolloClient, InMemoryCache } from "@apollo/client";
import { createPrismicLink } from "apollo-link-prismic";
const apolloClient = new ApolloClient({
link: createPrismicLink({
repositoryName: "YOUR_REPOSITORY_NAME",
accessToken: "YOUR_ACCESS_TOKEN",
}),
cache: new InMemoryCache(),
});
Providing a fetch
function
If you are using this link in an environment where a global fetch
function does not exist, such as Node.js, you must provide one using the fetch
option.
Environments like the browser, Next.js, Cloudflare Workers, and Remix provide a global fetch
function and do not require passing your own.
There are many libraries that can provide this function. The most common is node-fetch
, which you would configure like this:
import { ApolloClient, InMemoryCache } from "@apollo/client";
import { createPrismicLink } from "apollo-link-prismic";
import fetch from "node-fetch";
const apolloClient = new ApolloClient({
link: createPrismicLink({
repositoryName: "YOUR_REPOSITORY_NAME",
accessToken: "YOUR_ACCESS_TOKEN",
fetch,
}),
cache: new InMemoryCache(),
});
Installation with React Native
Using apollo-link-prismic
in React Native applications requires additional setup.
After installing apollo-link-prismic
, install the following URL Web API polyfill:
npm install react-native-url-polyfill
Next, import the polyfill in your app’s entry file (typically this is App.js or index.js).
import "react-native-url-polyfill/auto";
apollo-link-prismic
can now be used throughout your app.
Note: If the polyfill does not work after importing in your app's entry file, try the alternative "Flexible" set up method described in react-native-url-polyfill
's documentation.