Struggling with getting data from ApolloClient

Developing with Prismic
1

Hello everyone!
I'm stuck on how I deal with getting data from ApolloClient and I need your help.

What I want to achieve
To get data via GraphQL API by using Apollo Client

What I've done
I coded like blow;

const client = new ApolloClient({
  uri: 'https://test.cdn.prismic.io/graphql', ←this url is a fake.
  cache: new InMemoryCache()
});

const GET_ALL_COLUMN_POSTS = gql`
  query GetAllByType {
    allColumn_posts {
      edges {
        node {
          title
          description
          publication_date
          _meta {
            id
          }
        }
      }
    }
  }
`;

export const ListPost = () => {
  const { data }  = useQuery(GET_ALL_COLUMN_POSTS, {
    client: client
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <p>{data}</p>
  );

The result
Nothing appears and I can only see <p></p>.
To check if I can get data correctly, I wrote console.log(data), and objects below are displayed on termnal.

{
  data: undefined,
  loading: true,
  networkStatus: 1,
  refetch: [Function: bound ],
  reobserve: [Function: bound ],
  fetchMore: [Function: bound ],
  updateQuery: [Function: bound ],
  startPolling: [Function: bound ],
  stopPolling: [Function: bound ],
  subscribeToMore: [Function: bound ],
  client: <ref *1> ApolloClient {
  ...

What I'm thinking

Since the objects above says "loading: true," My code is not wrong and I guess I can't get data after just because loading is still going on. However, I have no idea how I should deal with it.

I'd really appreciate it if anyone tell me to resolve it.
Thank you in advance.

Additional information
Opening https://test.cdn.prismic.io/graphql, I can only see Prismic-Ref missing from header.

3

Hi @yy98. We at Prismic don't offer full support for Apollo & GraphQL, but I will try to do what I can to help you. I took a quick look at our docs and it looks like you're setting up the client differently from what the docs say:

Here's what's on that page:

export const client = new ApolloClient({
  link: new HttpLink({
    uri: prismic.getGraphQLEndpoint(repositoryName),
    fetch: prismicClient.graphQLFetch,
    useGETForQueries: true,
  }),
  cache: new InMemoryCache(),
})

Try that and see if it works for you.

5

Hi Levi! Thank you for much for your message and I'm really sorry for my late reply.
I've seen the docs you mentioned and I've already set the codes at prismicio.js like below;

/**
 * Creates a Prismic client for the project's repository. The client is used to
 * query content from the Prismic API.
 *
 * @param config {prismic.ClientConfig} - Configuration for the Prismic client.
 */
// export const createClient = (config) => {
export const createClient = () => {
  const client = prismic.createClient(repositoryName, {
    routes,
    accessToken: process.env.PRISMIC_ACCESS_TOKEN,
    fetchOptions:
      process.env.NODE_ENV === 'production'
        ? { next: { tags: ['prismic'] }, cache: 'force-cache' }
        : { next: { revalidate: 5 } }
  });

  prismicNext.enableAutoPreviews({ client });

  return client;
};

export const client = new ApolloClient({
  link: new HttpLink({
    uri: prismic.getGraphQLEndpoint(repositoryName),
    fetch: createClient.graphQLFetch,
    useGETForQueries: true
  }),
  cache: new InMemoryCache()
});

My code at first comment is what I coded at tsx file ( example: List.tsx ) where I want data from graphql.
I thought my code was not wrong to get data because I was able to see The result .
The thing I've confronted is :

Since the objects above says "loading: true," My code is not wrong and I guess I can't get data after just because loading is still going on. However, I have no idea how I should deal with it.

What I want to know is how to get some data from graphql and show it on display.

Though you mentioned prismic doesn't fully support Apollo & GraphQL, the docs says;

GraphQL clients such as Apollo Client or graphql-request can be used to query Prismic. The following code snippets show how to set up your GraphQL client with Prismic.

The statement makes me confused.
Would you help me clalify the usage of graphQL?" を "Could you please help me clarify the usage of GraphQL?

I Look forward to your reply.

7

Sorry that I wasn't clear. When I say that we don't fully support Apollo & GraphQL what I mean is that we don't work on resources for this, offer full documentation for it, and our support staff isn't necessarily up-to-date with it. It should work just fine with Prismic, though.

In this case, for example, I'm not sure about the loading issue as it's beyond my knowledge of Apollo & GraphQL. So we'll have to leave this to the community. Hopefully someone will be able to help you get this sorted out. Sorry that I couldn't help you in this case.

9

Thank you for your reply again. Ok, I understand what you say.
Having been trying to deal with my issue, I found the other way which help me instead of using Apollo & GraphQL. So, I close this.

But, I appreciate your support :smile:

1 Like
10

I had similar issue but this ApolloClient implementation worked with gatsby "gatsby": "^5.13.7", and "gatsby-source-prismic": "^6.0.1",

I found using the network tab off firefox debugger that the only difference was the graphQL query that does not take "allPrismic.." but "all..." as it was running off the graphQl debugger on the your-repository.prismic.io/graphql?query=query. The only issue I had was to query the UID field.