Missing allposts attribute on result

user_9680936 0
Viewed 1390

I am Django developer so for the first time I got my hands on vue and graphql, I don't know how exactly to deal with this error.

enter image description here

Here is my code, probably something is wrong in my query,


    <template>
      <section>
        <div class="home">
          <h2>hiii</h2>
          <div v-for="i in allposts" :key="i.id">
            <ul>
              <li>
                <h3>hey</h3>
                <strong>{{id}}</strong>:
                <span>{{title}}</span>
              </li>
            </ul>
          </div>
        </div>
      </section>
    </template>

    <script>
    import gql from "graphql-tag";

    const PostQuery = gql`
      query allposts {
        allPosts {
          id
          title
        }
      }
    `;

    export default {
      props: [],
      data() {
        return {
          allposts: []
        };
      },

      apollo: {
        allposts: PostQuery
      }
    };
    </script>

I can see the data is fetched successfully

enter image description here

Can anyone please guide me what I am doing wrong here?

Thanks in advance.

apollo graphql vuejs2 vue.js
2 Answers

Came here via Google. Checked out the docs, which explain the problem, and how to solve it: https://apollo.vuejs.org/guide/apollo/queries.html#name-matching

Please note that a common beginner's mistake is to use a data name different from the field name in the query.

The example they give:

apollo: {
  world: gql`query {
    hello
  }`
}

world and hello don't match, so you'd get an error.

The name has to either match, or as the docs suggest, you can provide an update function:

apollo: {
  world: {
    query: gql`query {
      hello
    }`,
    update: data => data.hello
  }
}

Or, rename the field in the GraphQL document:

apollo: {
  world: gql`query {
    world: hello
  }`
}
user_6350690

Okay so it turns out to be a silly mistake, API returns a result that has a key called allPosts, with a capital P, but my local data property and the Apollo property allposts, with a small p.

After making them all P everything works fine now.

user_96809360
Related