为什么第一次登录后没有数据？

Question

亲爱的vue和apollo用户。

我正在处理 首次安装 问题。

当我第一次启动应用程序时，我没有得到结果。

我使用的是 "apollo-boost "的ApolloClient、InMemoryCache、HttpLink。

我在ApplicationSettings(本地存储)中存储了我的用户ID和JWT。

如何动态设置令牌？

Vue.use(VueApollo);
const httpLink = new HttpLink({
    uri: "https://sebapi.com/graphql"
});
const authLink = setContext((_, { headers }) => {
    // get the authentication token from ApplicationSettings if it exists
    var tokenInAppSettings = ApplicationSettings.getString("token");
    // return the headers to the context so HTTP link can read them
    return {
        headers: {
            ...headers,
            authorization: tokenInAppSettings
                ? `Bearer ${tokenInAppSettings}`
                : null
        }
    };
});
export const apolloClient = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache()
});

const apolloProvider = new VueApollo({
    defaultClient: apolloClient
});

我已经创建了 一个GitHub repo的重现问题

和a 问题视频

登录时没有错误，但第一次浏览到列表页后，我得到了以下错误......

JS: [Vue warn]: Invalid prop: type check failed for prop "items". Expected Array, Object, got Undefined

JS: Error sending the query 'birds' ServerError: Response not successful: Received status code 400

看来APOLLO没有了。用户ID 在第一次查询时。

注: 您可以通过使用以下方法轻松清除用户数据 yarn cl 脚本

# debug app without HMR
yarn devn
# clear user data of app
yarn cl

Answer 1

使用vuex的解决方案repo。

https:/github.comkaangurudata-firstlogintreeuser-in-vuex。

将用户ID移动到vue实例中

+welcome.vue+

//const userId = ApplicationSettings.getNumber("userID");
// I have moved userID into vue.

export default {
  data() {
    return {
      birds:[],
      bird:{
        id: null,
        isim: "",
        bilezik: ""
      },
      userId: ApplicationSettings.getNumber("userID")
    };
  },

  apollo: {
    birds: {
      query: gql`
        query myBirds($userId: ID!) {
          birds(where: { user: $userId }) {
            id
            isim
            bilezik
          }
        }
      `,
      variables() {
        return {
          userId: this.userId,
        };
      },
    },
  },
};