DeIdGqlProvider

Under the hood, de[id] uses GraphQL to interact with the de[id] backend. This component provides the GraphQL client to the rest of the application to allow interactions to the backend, such as for querying or mutations.

💡

Out of the box, chain adapters such as <DeIdEvm /> includes the <DeIdGqlProvider />, and the options for the GraphQL provider is passed through the props of the chain adpater via the deIdGqlProviderProps field. Typically in your project, it is recommended to use theb chain adapter directly and only use <DeIdGqlProvider /> as a standalone component when your application potentially is not associated to any chain.

Usage

Here is an example of how to pass GraphQL configurations into the <DeIdEvm /> component:

import { DeIdEvm } from "@dustlabs/profiles/evm";
import { ApolloClientOptions, InMemoryCache } from "@apollo/client";
 
const apolloClientOptions: ApolloClientOptions<unknown> = {
  cache: new InMemoryCache({
    typePolicies: {
      Profile: {
        keyFields: ["profileId"],
        merge: true,
      },
    },
  }),
};
 
function App() {
  return (
    <DeIdEvm 
      api="https://your.de.id.backend.endpoint" 
      apolloClientOptions={apolloClientOptions}
    >
      {/** ... */} 
    </DeIdEvm>
  )
}

For more details on configuring the chain adapter check out DeIdEvm, check out this page.

Also, see Apollo Client docs (opens in a new tab) for GraphQL configurations.

Standalone Usage

You can also use <DeIdGqlProvider /> as a standalone component. Similar to the above, the props has the same type as ApolloClientOptions.

import { DeIdGqlProvider } from "@dustlabs/profiles/core";
import { ApolloClientOptions, InMemoryCache } from "@apollo/client";
 
const apolloClientOptions: ApolloClientOptions<unknown> = {
  api: "https://your.de.id.backend.endpoint",
  cache: new InMemoryCache({
  typePolicies: {
    Profile: {
      keyFields: ["profileId"],
      merge: true,
    },
  },
})}; 
 
function App() {
  return (
    <DeIdGqlProvider 
      apolloClientOptions={apolloClientOptions}
    >
      {/** ... */} 
    </DeIdGqlProvider>
  )
}

DeIdAvatar SocialBindingButton